级联组件-双向绑定

页面1 级联选择器 <select-tree></select-tree>,这样要引入封装好的，并且记得注册

<el-row><el-col :span="12"><el-form-item label="部门" prop="departmentId"><!-- 单独封装--><!-- 在父组件使用v-model双向绑定--><select-treev-model="userInfo.departmentId"class="inputW"></select-tree></el-form-item></el-col>
</el-row>

页面二，子组件 -----创建select-tree组件

<template><!-- 级联改变触发input事件--><el-cascader:value="value":options="treeData":props="props"size="mini"separator="-"@change="changeValue"></el-cascader>
</template>
<script>
import { getDepartment } from "@/api/department.js";
import { transListToTreeData } from "@/utils";
export default {
//接收value属性props: {value: Number,default: null,},data() {return {treeData: [],props: {label: "name", // 要展示的字段value: "id", // 要存储的字段},};},created() {this.getDepartment();},methods: {async getDepartment() {this.treeData = transListToTreeData(await getDepartment(), 0);},changeValue(list) {//这里打印出来是一个数组，我们需要拿到数组的最后一个值if (list.length > 0) {this.$emit("input", list[list.length - 1]); // 将最后一位的id取出来 传出去} else {this.$emit("input", null); // 如果长度为0 说明值为空}},},
};
</script>

列表型数据转化树形

/**** 列表型数据转化树形
*/
export function transListToTreeData(list, rootValue) {const arr = []list.forEach(item => {if (item.pid === rootValue) {// 找到了匹配的节点arr.push(item)// 当前节点的id 和 当前节点的子节点的pid是想等的const children = transListToTreeData(list, item.id) // 找到的节点的子节点//只有当前节点有子节点时才添加children属性if (children.length) { item.children = children } // 将子节点赋值给当前节点}})return arr
}