解决elementUi 的cascader 组件的点击lab选项问题

解决elementUi 的cascader 组件的点击lab选项问题

由于产品不想要前面的单选框,还要实现点击lable即可选中效果 看了n多方案前面的单选框不知道怎么隐藏，但是点击lable即可选中效果还是很简单。

原理：elementUI这个组件的change事件是当下拉框发生变化时触发的， 而下拉框发生变化会自动触发它的子下拉框， 所以我们可以通过监听这个change事件，然后在change事件中判断触发这个change事件的下拉框是父下拉框还是子下拉框，如果是父下拉框，则不处理，如果是子下拉框，则触发子下拉框的change事件，这样子下拉框就会一直触发change事件，直到触发到最底层的下拉框。

具体代码如下：

<template>
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          label: '选项1',
          value: '1',
          children: [
            {
              label: '选项1-1',
              value: '1-1'
            },
            {
              label: '选项1-2',
              value: '1-2'
            }
          ]
        },
        {
          label: '选项2',
          value: '2',
          children: [
            {
              label: '选项2-1',
              value: '2-1'
            },
            {
              label: '选项2-2',
              value: '2-2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      // 判断触发这个change事件的下拉框是父下拉框还是子下拉框
      const isChildCascader = value.length > this.value.length
      // 如果是子下拉框，则触发子下拉框的change事件
      if (isChildCascader) {
        this.$refs.cascader.handleChange(value)
      }
    }
  }
}
</script>

这样就可以实现点击lable即可选中效果了。