一般来说,组件都会自带TreeSelect 树型选择控件
但是自带的组件样式可能不是我们要的,比如antdv的控件长这样
但我们更想要这样,后面有数量
首先npm下载或者cnpm下载
cnpm i @riophae/vue-treeselect --save
然后在组件中引入
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
}
最后在组件中使用
<treeselect
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
/>
export default {
data() {
return {
// 菜单树选项
menuOptions: [],
};
},
methods: {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.menuName,
children: node.children,
};
},
}
}
结束