elementUI 级联选择器点击label文字部分选中及选中后收起菜单

Element UI的级联选择器（Cascader）组件默认行为是点击选择器的文本框打开选择菜单。如果你想要点击label部分也能选中该项并且收起菜单，你可以通过监听label的点击事件并模拟文本框的点击行为来实现。

以下是一个示例代码：

<template>
  <el-cascader
    v-model="selectedValue"
    :options="options"
    @visible-change="handleVisibleChange"
    ref="cascader"
  >
    <template slot-scope="{ node, data }">
      <span @click.stop="handleLabelClick(data)">{{ data.label }}</span>
    </template>
  </el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'option1',
          label: 'Option 1',
          children: [
            {
              value: 'child1',
              label: 'Child 1',
            },
          ],
        },
        // ... more options
      ],
    };
  },
  methods: {
    handleLabelClick(data) {
      this.selectedValue = [data.value];
      this.$nextTick(() => {
        this.$refs.cascader.$refs.panel.handlePick(data);
      });
    },
    handleVisibleChange(visible) {
      if (!visible) {
        this.$refs.cascader.toggleDropDownVisible(visible);
      }
    },
  },
};
</script>

在这个示例中，我们使用了handleLabelClick方法来设置选中的值，并且在下一个事件循环中通过this.$refs.cascader.$refs.panel.handlePick(data)来模拟用户的点击行为。handleVisibleChange方法用于在选择器收起的时候再次调用toggleDropDownVisible方法以防止收起的动作被重复触发。