vue+elementui---下拉框树形

最新推荐文章于 2024-06-18 10:14:03 发布

一只会开发的哈士奇

最新推荐文章于 2024-06-18 10:14:03 发布

阅读量268

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_68312438/article/details/127861363

版权

html部分

<el-form-item label="项目经理" prop="managerId">
          <treeselect style="width:100%" v-model="form.managerId" :options="deptUOptions" :show-count="true" placeholder="请选择归属部门" :disable-branch-nodes="true"/>
        </el-form-item>

引入的包

import { treeselectuser } from '@/api/system/dept';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

js初始化

export default {
  name: "Infodp",
  components: { Treeselect },
  data() {
    deptUOptions: undefined,
  }
}

js部分

    getTreeselect() {
      treeselectuser().then(response => {
        this.deptUOptions = response.data;
        for (let deptElememt of this.deptUOptions) {
          this.doDept(deptElememt)
        }
      });
    },
    /** 区分部门和人员的处理 */
    doDept(dept){
      if (dept.treeFlag=='0'&&!dept.children){
        dept.children=[];
      }
      for (let deptElement of dept.children) {
        if (deptElement.treeFlag=='0'){
          this.doDept(deptElement)
        }
      }
    },