1.下载插件
npm install @riophae/vue-treeselect --save
2.main.js页面中引入,声明组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component("Treeselect", Treeselect);
import { handleTree } from "@/utils/ruoyi";//该文件可从若依下载
Vue.prototype.handleTree = handleTree
3-1.页面使用
<el-form-item label="商铺类型" prop="shopTypeId">
<!-- <el-tree :data="classList" :props="props" @node-click="handleNodeClick"></el-tree> 看element文档 列表展示用这个-->
<!-- 表单展示用treeselect -->
<treeselect
v-model="personalForm.shopTypeId"
:options="classList"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择商铺类型"
/>
</el-form-item>
3-2.data字段
data(){
return{
//商铺类型
classList: [],
personalForm:{
shopTypeId: null, //商家类型id,定义为null/undefined输入框不会出现---unknown
}
}
}
3-3.methods方法
/** 转换树形数据结构(商铺类型) */
normalizer(node) {
if (node.cereShopType && !node.cereShopType.length) {
delete node.cereShopType;
}
return {
id: node.typeId,
label: node.typeName,
children: node.cereShopType
};
},
//商铺类型
getClassList() {
let that = this;
let params = {
url: "/api/check/getShopType",
method: "get",
};
this.sendReq(params, (res) => {
if (res.code === "") {
//this.classList = res.data;//当不需要给树形添加-顶级站点-的时候-直接取data。
const menu = { typeId: 0, name: '顶级站点'};
menu.children = this.handleTree(res.data, "typeId");//给树形结构添加id为0的顶级站点,handleTree为引入ruoyi的文件
this.classList .push(menu);
} else {
that.$message({
message: res.message,
type: "error",
});
}
});
},
(备注:给自己看的参考突突到家-入驻-商铺类型)其他树形组件:
vue-treeselect的常见bug:(unknown)
找到node-modules/@riophae/vue-treeselect/dist/vue-treeselect.cjs.js该文件下的(unknown),然后替换为(请选择)
二、el-cascader组件
<el-cascader v-model="tableFrom.parent_site_id" :options="treeArr" :props="Props" clearable @change="getList(1)" />
data中定义value、lable、children的键值,如果key和value相同就不用重新定义了
siteProps: {
value: "id",
label: "name",
children: "children",
emitPath: false,
multiple: true,//多选-1,2,3级都能选,去掉,只能选第三级
checkStrictly:true,//选中父级后,是否勾选子级;false勾选,true不勾选
},
样式如下: