elementui中cascader默认值设置

需求

在最近的开发中，碰到这样一个需求：

1. 点击某个按钮时，cascader需要选中特定的值;
2. 当该值发生改变时，需要获取到选中的值的label和value，赋值给表单数据。

思路和坑

1. 默认值：查饿了吗文档，发现cascader的默认值可以用value/v-model来进行绑定，但是没有明确的指明绑定的数据类型。经过使用 度娘大法好 终于知道，其要绑定一个数组，且数组中是要选中数据及其父节点的所有label值（注意要按顺序排好,选中的值排在最后一位）
2. 获取label和value：可以通过change事件，配合getCheckedNodes事件来得到
3. 后端返回的数据中是id和name，可以通过prop属性来配置label和value.

代码实现

<template>
  <div>
    <el-button type="primary" @click="getCascaderValue"
      >点我默认选择数据管理部</el-button
    >
    <br />
    <el-form ref="form" :model="form">
      <el-form-item>
        <el-cascader
          clearable
          v-model="defaultCascaderValue"
          :show-all-levels="false"
          :options="allOptions"
          :props="myProp"
          @change="getvalue"
          class="myCascader"
          ref="myCascader"
        >
        </el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Cascader",
  data() {
    return {
      form: {},
      allOptions: [],//总的数据
      defaultCascaderValue: [], // 默认值
      myProp: { //配置项
        value: "id",
        label: "name",
        checkStrictly: true, //允许选择任意一节
      },
    };
  },
  methods: {
    // 获取某一项的所有父节点的label值
    getDefaultCasderValues(str, arr) {
      let _this = this //将this存一下，方便在递归中使用
      let initArr = arr;
      let testArr = [];
      // 递归
      function test(str, arr) {
        for (var item of arr) {
          if (
            item.id !== str &&
            Array.isArray(item.children) &&
            item.children.length > 0
          ) { // 正向递归
            test(str, item.children);
          } else if (item.id === str) {
            testArr.unshift(item.id);
            // 在这儿需要向form里赋值一下，避免第一次默认选中时form里取不到数据
            const { id: orgid, name: org } = item;
            _this.form = { orgid, org };
            if (item.pId !== "-1") { //反向遍历到0级时，终止递归
              test(item.pId, initArr);
            } else {
              return;
            }
          }
        }
      }
      test(str, arr);
      return testArr;
    },
    getCascaderValue() {
      this.$api.getCascaderValue().then((res) => {
        this.allOptions = res.data;
        // 这儿这个‘4’是数据管理部的id值，可以升级成一个动态的值
        this.defaultCascaderValue = this.getDefaultCasderValues(
          "4",
          this.allOptions
        );
      });
    },
    getvalue() {
      if (this.defaultCascaderValue.length > 0) { // 点击清空时，也会触发change事件，避免报错，先判断一下是否有值在来获取选择的节点
        const { label: org, value: orgid } =
          this.$refs.myCascader.getCheckedNodes()[0];
        this.form = { org, orgid };
      }else{
        this.form = {}
      }
    },
  },
};
</script>

效果

如有错误，欢迎斧正；如有疑问，欢迎留言讨论。