让 ElementUI 级联选择器更易用：实现点击文本选中

很久以前，在一家公司，一名前端工程师小帅正在忙碌地开发一个与 ElementUI 的 el-cascader 相关的新功能。小帅对自己的代码非常自信，觉得用户体验上已经足够好了。他将任务提交给了负责测试的小美。

小美认真地测试了小帅的功能，并发现了一个用户体验上的问题：在 el-cascader 中，只有点击复选框才能选中，而无法通过点击整行来选中。她觉得这样的操作并不符合大多数用户的使用习惯，所以决定将这个问题反馈给小帅。

然而，小帅并不认同小美的意见。他觉得自己开发的功能已经足够完美，不需要再做任何修改。于是，他拉开抽屉，掏出一把菜刀放在桌上，小美默默的回了工位。

小美越想越生气。她认为，作为前端工程师，应该始终站在用户的角度，提供更好的用户体验。为了维护用户的权益，她决定再次与小帅沟通。

这次，小美换了一种策略。她准备了一份详细的用户调查报告，显示大多数用户更喜欢点击整行来选中 el-cascader。她还向小帅展示了竞争对手的产品，证明了这一点。最后，她用一种严肃的口吻告诉小帅：“作为一名优秀的前端工程师，我们的责任是优化产品，而不是固守自己的观点。现在，请重新考虑我的建议。”

被小美凶了一顿后，小帅收起桌上的菜刀，开始认真地修改代码，将 el-cascader 改为点击整行都可以选中。

<script setup>
import { ref } from 'vue'

const locationValue = ref([])
const options = [
  { value: 1002, label: "北京" },
  { value: 1024, label: "上海" },
  {
    value: 1001,
    label: "安徽",
    children: [
      { value: 100106, label: "合肥" },
      { value: 100114, label: "芜湖" },
      { value: 100101, label: "蚌埠" }
    ]
  },
  {
    value: 1003,
    label: "福建",
    children: [
      { value: 100300, label: "福州" },
      { value: 100307, label: "厦门" },
      { value: 100306, label: "三明" },
      { value: 100305, label: "泉州" },
      { value: 100301, label: "龙岩" }
    ]
  }
]
</script>

<template>
  <main>
    <el-cascader
      popper-class="location"
      v-model="locationValue"
      :options="options"
      placeholder="期望工作地区"
      :props="{ multiple: true, expandTrigger: 'hover', checkStrictly: true }"
      :show-all-levels="false"
      filterable
    />
  </main>
</template>

<style lang="scss">
.location {
  .el-checkbox,
  .el-radio {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .el-cascader-node {
    padding-left: 34px;
  }

  .el-checkbox__input,
  .el-radio__input {
    position: absolute;
    left: 20px;
  }
}
</style>

核心实现思路是，在 el-cascader 组件上添加 popper-class="location" 属性，为 el-cascader 增加一个名为 location 的自定义类名(这个名字根据你的需求自定义)。接下来，通过调整 location 下的 .el-checkbox 和 .el-cascader-node 的样式，将 .el-checkbox 设为绝对定位，使其覆盖整个 li 元素。最后，稍微调整复选框的位置，即可实现点击文本选中的功能。

让 ElementUI 级联选择器更易用：实现点击文本选中

完整代码片段