Treeselect树形组件以及-其他树形组件的使用

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"
      noOptionsText="暂无数据"
      placeholder="请选择商铺类型"
    />
</el-form-item>

常见问题：出现No options available时,添加noOptionsText=“暂无数据”

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不勾选
},

样式如下：