共计 1145 个字符,预计需要花费 3 分钟才能阅读完成。
文档地址: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
},
正文完
发表至: javascript
2021-09-02