关于javascript:vue多选组件vuetreeselect

文档地址：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
      },