动态获取部门(el-tree-select)自定义键名

 <el-tree-select
            check-strictly
            size="large"
            :props="treeProps"
            :data="datas.dataTree"
            v-model="datas.Departmentid"
            :multiple="false"
            placeholder="请选择"
            :normalizer="normalizer"
            @node-click="handleNodeClick"
          />
 
const dataTree = reactive([] as any[]);

//初始化
onMounted(() => {
  getDeptTree().then((data) => {
    //console.log("树形选择", data);

    //部门
    Object.assign(dataTree, data?.Data); //赋值

    //反序列
    const clonData = JSON.parse(JSON.stringify(data?.Data)); //深度克隆

    //console.log("深度转化", clonData);
    //const bb = normalizer(clonData);
    //datas.dataTree.push(bb.treeProps);

    datas.dataTree.push(clonData);
  });
});

//部门
const treeProps = reactive({
  value: "id",
  label: "name",
  children: "children",
});

//自定义键名
const normalizer = (dataTree: any) => {
  if (dataTree.children && !dataTree.children.length) {
    delete dataTree.children;
  }
  return {
    treeProps: {
      value: dataTree.id,
      label: dataTree.name,
      children: dataTree.children,
    },
  };
};
 
//节点点击事件
const handleNodeClick = (data: any) => {
  //console.log("节点点击事件", data);
  datas.Departmentname = data.name;
  datas.Departmentid = data.id;
};
 
const datas = reactive({
  Departmentid: undefined, //部门ID(必填)
  dataTree: [] as any[],
});
posted @ 2022-08-29 09:53  双手插在裤兜谁也不爱  阅读(802)  评论(0)    收藏  举报