Vue3 + Element Plus + el-dropdown split-button 左边是功能按钮，右边是触发下拉菜单的按钮

el-dropdown split-button 实现默认 Element Plus 样式下，按钮设置为 type="primary" plain 的样式效果：

 html元素结构：

                <div class="btn-div">
                  <el-button class="in-btn" type="primary" plain @click="onAddClick">新增</el-button>
                  <el-dropdown
                    class="custom-dropdown"
                    split-button
                    trigger="click"
                    placement="bottom-end"
                    @click="onImportClick">
                    导入
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="onDownloadTemplateClick">下载模板</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>

传统样式设置：

<style scoped lang="scss">
/* el-dropdown split-button 实现默认 Element Plus 样式下，按钮设置为 type="primary" plain 的样式效果 */
/* 前面按钮 */
.btn-div :deep(.custom-dropdown .el-button) {
  background-color: #ecf5ff; /* 按钮背景颜色 */
  border-color: #a0cfff; /* 按钮边框颜色 */
  color: #409eff; /* 按钮文字颜色 */
}
/* 前面按钮，悬停效果 */
.btn-div :deep(.custom-dropdown .el-button:hover) {
  background-color: #409eff; /* 按钮背景颜色 */
  border-color: #409eff; /* 按钮边框颜色 */
  color: #fff; /* 按钮文字颜色 */
}
/* 后面按钮 */
.btn-div :deep(.custom-dropdown .el-dropdown__caret-button) {
  border-left: 1px solid #a0cfff; /* 分割线 */
}
/* 后面按钮，悬停效果 */
.btn-div :deep(.custom-dropdown .el-dropdown__caret-button:hover) {
  background-color: #409eff; /* 按钮背景颜色 */
  border-color: #409eff; /* 按钮边框颜色 */
  color: red; /* 小箭头颜色 */
  border-left: none; /* 悬停时不显示分割线 */
}
</style>

sass/scss嵌套样式设置： 

<style scoped lang="scss">
/* el-dropdown split-button 实现默认 Element Plus 样式下，按钮设置为 type="primary" plain 的样式效果 */
.btn-div {
  .custom-dropdown {
    /* 前面按钮 */
    :deep(.el-button) {
      background-color: #ecf5ff; /* 按钮背景颜色 */
      border-color: #a0cfff; /* 按钮边框颜色 */
      color: #409eff; /* 按钮文字颜色 */
    }
    /* 前面按钮，悬停效果 */
    :deep(.el-button:hover) {
      background-color: #409eff; /* 按钮背景颜色 */
      border-color: #409eff; /* 按钮边框颜色 */
      color: #fff; /* 按钮文字颜色 */
    }

    /* 后面按钮 */
    :deep(.el-dropdown__caret-button) {
      border-left: 1px solid #a0cfff; /* 分割线 */
    }
    /* 后面按钮，悬停效果 */
    :deep(.el-dropdown__caret-button:hover) {
      background-color: #409eff; /* 按钮背景颜色 */
      border-color: #409eff; /* 按钮边框颜色 */
      color: red; /* 小箭头颜色 */
      border-left: none; /* 悬停时不显示分割线 */
    }
  }
}
</style>