方法:我们可以用一个"@riophae/vue-treeselect": "0.4.0"的包去解决
在自己的页面上引用
// 导入树形结构
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
注册树形 components: { Treeselect }
然后使用
<treeselect
:options="classList"
:normalizer="defaultProps"
placeholder=""
/>
options 这个是放数据源的
normalizer:这个是后端返回来不是able和children的时候我们需要处理的
在data中定义
chidlren为空(包含[]和null)时,不展示下拉角标和No options available 提示 (重要)
defaultProps(node) {
return {
children: // 这个地方就是你的子集
node.chidlren&& node.chidlren.length > 0
? node.chidlren
: 0, // 自定义下级chidlren字段,判断有没有子集,没有的话就让他为0,不去渲染子集
label: node.name, //这个地方就是改变你显示的label
};
},