Element-UI cascader级联选择器，任意选择（父级也可）

Element-UI cascader级联选择器，任意选择（父级也可）

<!-- Test.vue -->
<template>
  <div style="display: flex; justify-content: center; margin-top: 200px;">
    <el-cascader ref="cascader" v-model="addrCode" :options="options" :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }">
      <template slot-scope="{ node, data }">
        <div @click="cascaderClick(data)">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        { "label": "广东", "value": "440000", "children": [{ "label": "广州", "value": "440100" }, { "label": "深圳", "value": "440300" }] },
        { "label": "宁夏", "value": "640000", "children": [{ "label": "银川", "value": "640100" }] }
      ],
      addrCode: undefined,
    };
  },
  methods: {
    cascaderClick (nodeData) {
      this.addrCode = nodeData.value;
      this.$refs.cascader.checkedValue = nodeData.value;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);
      this.$message({
        message: '已选择：' + nodeData.label,
        type: 'success',
        duration: 1000
      });
    },
  }
};
</script>

演示动画：