参考链接: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返回的数据是这个
image.png
// 触发部门事件
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);
}
},
