vue多选组件vue-treeselect

文档地址：https://www.cnblogs.com/alettarit/p/10829062.html

实现代码：

我这个需求是 一直tree的每个节点都有三级 选中后，一级节点，二级节点，叶子节点的名字分三个字段传给后端

1.template

  <el-form-item label="目录检索" prop="value">
         <div class="block" style="width: 215px">
           <treeselect
             v-model="v1"
             placeholder="选择目录"
             :options="options"
             :normalizer="normalizer"
             multiple
             @input="inputchange()"
             valueFormat="node"
           />
         </div>
       </el-form-item>

2.导入

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  components: { Treeselect, info },

3.data:

 //目录检索
 options: [],
  v1: [],

4.method:

// 一级目录二级目录三极目录
      normalizer(node) {
        //将里面children=[]为空的时候去掉（如果不加的这句的话 如果里面children属性值为空 数状选择器里就给他默认有下一层  可里面没有所以显示空数据）
        if (node.children && !node.children.length) {
          delete node.children
          node.level = 3
        }
        if (!node.children) {
          node.level = 3
        }
        if (node.children && node.children.length) {
          if (node.parentId == '0') {
            node.level = 1
          } else {
            node.level = 2
          }
        }
        // 将后台传来的数组进行修改
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        }
      },
      inputchange() {
        var v2 = []
        var v3 = []
        var v4 = []
        console.log(this.v1)
        this.v1.forEach((element) => {
          if (element.level == 1) {
            v2.push(element.label)
          } else if (element.level == 2) {
            v3.push(element.label)
          } else {
            v4.push(element.label)
          }
        })
        this.v2 = v2
        this.v3 = v3
        this.v4 = v4
      },