el-cascader回显问题

981 阅读1分钟

el-cascader回显问题

 <el-col :span="12">
          <el-form-item label="父级指标" prop="parentId">
            <el-cascader
            v-model="selectedOptions"
              :options="treeData"
              :props="{ checkStrictly: true ,customProps, value: 'id', label: 'name', children: 'children'    }"
              @change="change"
              clearable>
            </el-cascader>
      </el-form-item>
      </el-col>

定义一个 v-model="selectedOptions"

在data里面定义,这是一个数组

编写一个递归查询的方法, 通过递归找到对应的节点 this.selectedOptions = path; // 找到对应的节点,将路径赋值给v-model

findNodeById(nodes, id, path) {    
      for (let node of nodes) {
        path.push(node.id);
        if (node.id === id) {
          this.selectedOptions = path; // 找到对应的节点,将路径赋值给v-model
          return;
        } 
        if (node.children && node.children.length > 0) {
          this.findNodeById(node.children, id, path.slice()); // 递归查找子节点
        } 
        path.pop();
      }
	},

然后传入数组和你需要回显的父级的id,就好了

	this.$store
        .dispatch("normcategory/find", para)
        .then((res) => {
          vm.formData = res.data;
          this.findNodeById(this.options.treeData, res.data.parentId, []);