0.vue-treeselect中文网地址:https://www.vue-treeselect.cn/

1.安装插件:npm install --save @riophae/vue-treeselect

2.引用:

import Treeselect from '@riophae/vue-treeselect';

import '@riophae/vue-treeselect/dist/vue-treeselect.css';

3.注册:

components: {Treeselect },

4.添加:

<treeselect v-model="treevalue"

                    :multiple="false"

                    :options="treeoptions"

                    placeholder="选择部门..."/>

5.treeselect参数

 treevalue: null,

 treeoptions: [],

6.如果数据tree不是标准的id,lable结构结构则需要对内容进行转换(我使用的数据是在name,nodeid中)

/*treeSelect获取筛选条件*/
    getTreeSelete() {
      let me = this;
      $.ajax({
        url:'...........',
        dataType: 'json',
        type: 'post',
        beforeSend: function (request) {
          request.setRequestHeader("token", me.token);
        },
        success: function (result) {
          if (result.code == 200) {
            me.treeoptions = me.getTree(result.data.treeData);
          }
        }
      });
    },
/*转化tree标准格式*/
    getTree(tree = []) {
      let arr = [];
      if (tree.length !== 0) {
        tree.forEach(item => {
          let obj = {};
          obj.label = item.name;
          obj.id = item.nodeid;
          if (item.children.length > 0) {
            obj.children = this.getTree(item.children);
          }
          arr.push(obj);
        });
      }
      return arr
    },

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐