el-cascader级联选择器获取名称以及回显

参考链接:https://www.jianshu.com/p/c79c093a5b18
所属部门

 <el-col :span="12">
              <el-form-item label="所属部门">
                <!-- <el-input :placeholder="ruleForm.depName?ruleForm.depName:'请选择'" v-model="ruleForm.depName" @click.native="getTree"></el-input> -->
                <el-cascader style="width:340px" ref="refDep"  @change="handleDep" :options="depTreeList" v-model="ruleForm.depId" :props="defaultProps" :show-all-levels="false" clearable></el-cascader>
                <!-- <el-tree accordion v-if="closeTree" check-strictly ref="tree" node-key="id" show-checkbox default-expand-all :expand-on-click-node="false" :check-on-click-node="true" :data="depTreeList" :props="defaultProps" @check="treeCheck"></el-tree> -->
              </el-form-item>
            </el-col>

depTreeList返回的数据是这个

   // 触发部门事件
    handleDep(){
      this.ruleForm.depId = this.$refs["refDep"].getCheckedNodes()[0].value
      this.ruleForm.depName = this.$refs["refDep"].getCheckedNodes()[0].label
      console.log('我选择了部门',this.$refs["refDep"].getCheckedNodes()[0].value)
      console.log('我选择了部门',this.$refs["refDep"].getCheckedNodes()[0].label)
    },

defaultProps: {
        value: "id",
        label: "name",
        children: "sub",
        emitPath:false
      },

emitPath 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 boolean - emitPath:false置为false,表示取最后一个层级的id

    // 调用查看接口
    getInfo() {
      if (this.rowData) {
        for (let item in this.rowData) {
          this.ruleForm[item] = this.rowData[item];  
        }
        this.$nextTick(()=>{
          this.$refs.pictureRef.updateValue()
        })
        console.log("获取图片", this.ruleForm.depId);
      }
    },