1 下载
npm install--save @riophae/vue-treeselect
2 引入
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
3 使用
3.1 components: { Treeselect }, //注册为页面组件
3.2 <treeselect
v-model="form.parentId" // 如在表单内,,,绑定的数据
:options="menus" //需要的数据 格式为[{},{}]
:normalizer="normalizer" // 如果后端返回的数据不一样,,修改数结果名称
style="width: 290px;"
placeholder="选择上级类目"
></treeselect>
3.3 //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
normalizer(node) {
//去掉children=[]的children属性
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
children: node.children
};
},
