el-cascader 级联选择器 总结

1.组件使用

图片展示：

代码展示：

<template>
  <div class="home">
    <el-cascader
      ref="myCascader"
      v-model="form.id"
      :placeholder="form.name"
      :options="options"
      :show-all-levels="false"
      :props="{ value: 'id', label: 'name', checkStrictly: true }"
      class="cascader"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: "test4",
  data() {
    return {
      form: {
        id: "",
        name: "",
      },
      options: [
        {
          id: "1",
          name: "吃饭",
          children: [
            {
              id: "2",
              name: "睡觉",
            },
            {
              id: "3",
              name: "打豆豆",
            }
          ],
        },
      ],
    };
  },
  methods: {
    // 试点机构的选择
    handleChange() {
      //总结五
      this.$refs.myCascader.dropDownVisible = false;
      // 总结六
      this.form.id = this.$refs["myCascader"].getCheckedNodes()[0].value;
      this.form.name = this.$refs["myCascader"].getCheckedNodes()[0].label;
    },
  },
};
</script>

<style lang="scss" scoped>
.cascader {
  width: 230px;

  ::placeholder {
    color: #606266;
  }
}
.home {
  margin: 15px;
}
</style>

总结问题的解决方法：

总结一：组件自带的数组中的字段名是：value和label；要将我们数组中的字段id和name和组件中的value和label对应起来，需要使用props属性

:props="{ value: 'id', label: 'name' }"

总结二：选择任意一级

:props="{ checkStrictly: true }"

总结三：只显示最后一级

:show-all-levels="false"

总结四：显示默认值，最初在网上找了好多方法，但是都十分复杂，而且好多没有生效，最后因为需求比较紧急，用了组件自带的placeholder属性，效果还行，在样式中将placeholder属性的显示颜色设置成选中状态下的显示颜色

结果：

总结五：在点击过程中，选中后并没有关掉级联面板，解决方法：在监听方法中触发：dropDownVisible；

this.$refs.myCascader.dropDownVisible = false;

总结六：级联选择器选中后，监听方法中会获得一个带有选中id的数组，而我们想拿到选中对象对应的value和label,如果做单纯的数据处理，可以拿到想要的值，但是操作就太多了，可以使用：getCheckedNodes；this.$refs['件名'].getCheckedNodes() 获取到选中的节点 

this.form.id = this.$refs["myCascader"].getCheckedNodes()[0].value;
this.form.name = this.$refs["myCascader"].getCheckedNodes()[0].label;