vue+elementui---下拉树形多选

最新推荐文章于 2024-07-23 15:45:06 发布

一只会开发的哈士奇

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量250

点赞数

文章标签： vue.js elementui javascript

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

版权

html部分

        <el-form-item label="施工员" prop="sgyIds">
          <treeselect style="width:100%"
                      v-model="form.sgyIdArr"
                      :options="deptUOptions"
                      :show-count="true"
                      placeholder="请选择"
                      :multiple="true"
                      @select="nodeSgySelect"
                      @deselect="nodeSgyCancelSelect"
                      :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: "",
  components: { Treeselect },
  data() {
    return {
        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)
        }
      }
    },

    nodeSgySelect(node, instanceId){
      this.form.sgyIdArr.push(node.id)
    },
    nodeSgyCancelSelect(node, instanceId){
    },