Cascader 级选择器的回显（实例）

效果显示：

思路：

1. 让后端创建一个空的JSON对象，用来存放数据，此处用的是 unitJson。

2. 首先在data中创建一个名为 checkUnitList 的对象，然后在拿到接口查询所有数据的时候，用this.checkUnitList = JSON.parse(res.data.unitJson) ，将值为null的对象unitJson赋值给checkUnitList。

3. 接着在<el-cascader></el-cascader>中用 v-model 绑定checkUnitList。

4. 最后在提交方法createData()中通过this.temp.unitJson = JSON.stringify(this.checkUnitList);

5. 将数据提交到数据库的unitJson中，从而完成回显。

代码：

// template 中

<!-- 组织选择 -->
<el-form-item>
  <el-form-item label="添加单位：" prop="groupId">	 
    <el-cascader
      ref="cascader"
      :options="options"
      :props="optionProps"
      v-model="checkUnitList"						// 3.v-model绑定checkUnitList		
      clearable
      filterable
      @change="handelChange()"
    />
  </el-form-item>
</el-form-item>


// data（） 中

data() {
  return {
    type: "", // 页面类别
    id: "",
    fullscreenLoading: false,
    temp: {
      id: "",
      titleId: "",
      groupName: "",
      groupId: "",
      headline: "",
      isShow: "",
      unitJson: "",
    },
    // 添加单位
    options: [],
    optionProps: {
      value: "id",
      label: "groupName",
      children: "children",
      multiple: true,
    },
    checkUnitList: [],					 	// 2.定义一个checkUnitList，类型为数组
    canEdit: true,
    list: null,
    // 选项卡
    option: [
      {
        titleId: "1",
        tabTitle: "选项卡一",
      },
      {
        titleId: "2",
        tabTitle: "选项卡二",
      },
      {
        titleId: "3",
        tabTitle: "选项卡三",
      },
    ],
    value: "",
  };
},



// methods 中

  methods: {
    // 查询表彰党组织名单
    getDetail() {
      getCommend({ id: this.$route.query.id }).then((res) => {
        this.temp = res.data;

                    // 1.在查询所有数据的时候，将res.data.unitJson赋值给checkUnitList

        this.checkUnitList = JSON.parse(res.data.unitJson);
      });
    },
     //创建/编辑数据
    createData() {
    	                          // 4.将checkUnitList的数据提交到unitJson中
      this.temp.unitJson = JSON.stringify(this.checkUnitList);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          if (this.type === "add") {
            saveCommend(this.temp)
              .then((res) => {
                this.fullscreenLoading = false;
                this.$notify({
                  title: res.msg || "新增成功",
                  type: "success",
                  duration: "2000",
                  onClose: () => {
                    this.$router.back();
                  },
                });
              })
              .catch(() => {
                this.fullscreenLoading = false;
              });
          } else {
            updateCommend(this.temp)
              .then((res) => {
                this.fullscreenLoading = false;
                this.$notify({
                  title: res.msg || "修改成功",
                  type: "success",
                  duration: "2000",
                  onClose: () => {
                    this.$router.back();
                  },
                });
              })
              .catch(() => {
                this.fullscreenLoading = false;
              });
          }
        } else {
          console.log("valid err");
        }
      });
    },
  }