element-ui tree树形控件 自定义节点内容
首先上一个树形控件的HTML
<el-tree
:data="treeData" // 树形控件数据源
:props="defaultProps" // 树形控件的配置项
node-key="id" // 每个树节点对应的唯一标识符
highlight-current // 是否高亮
ref="tree" // ref标识符
:default-expanded-keys="expandKeys" //默认展开节点的key数组
@current-change="currentNode" // 当前选中的节点发生变化时触发的事件
:expand-on-click-node="false" // 是否在点击节点的时候选中节点，默认值为true
>
// 插槽，放自定义节点内容
// 此处的class和slot-scope均是固定写法
<span class = "custom-tree-node" slot-scope = " { node, data }">
//label标题
<span>{
{
data.categoryName }}</span>
// 此处底下的sysDeafult标识的是是否是系统默认项，如果是，则值为1，不是系统默认项，自己添加的则值为0
<span class="tree-botton-arr" v-if = "data.sysDefault !=1">
// 新增按钮 如果node.level等于1即 该节点为一级父节点，则出现新增按钮
<el-button type="text" size="mini" @click="() => append(data, node)" v-if="node.level === 1">
<i class = "el-icon-plus"></i>
</button>
// 删除按钮
<el-button type="text" size="mini" @click = "() => remove(node, data)">
<i class = "el-icon-delete"></i>
</el-button>
// 编辑按钮
<el-button type="text" size="mini" @click = "() => edit(node, data)">
<i class="el-icon-edit"></i>
</el-button>
</span>
</el-tree>
效果图
上js data部分
data() {
return{
// 树形控件的数据源，为数组。
treeData: [
{
id: "",
categoryName: "",
child: [
{
id:"",
catogoryName: "",
child: []
}
]
}
],
// 树形控件配置项，为对象，label代表节点的title标签，children代表节点的子树（孩子）
defaultProps: {
label: 'categoryName',
children: 'child'
},
// 默认展开的数组
expandKeys: [],
}
}
上js methods等部分
// 在树形结构渲染到页面之前，需要后台先获取树形控件的数据源
// 在mounted（）中调用获取树形控件数据源的函数
mounted() {
this.getTreeData();
},
// 上方法
methods: {
// 获取树形结构的数据源
getTreeData() {
// 调用api接口，获取数据库数据库数据
ConfigApi.getCategoryTree().then(res => {
if (res.code === 200) {
this.treeData = res.result;
// 设置默认选中和默认展开的节点
setTimeout(() => {
// 如果树形控件的数据源，则将其第一个节点设置为当前选中的节点 及 当前展开的节点
if (this.treeData.length > 0 ) {
this.setCurrentKey(this.treeData[0].id);
this.expandKeys = [this.treeData[0].id];
}
}, 0);
}
});
},
// setCurrentKey为element官网自带的通过key设置当前某个节点选中的状态，使用此方法必须设置node-key属性
// 注意：（key）待被选中的节点key， 若为null则取消当前高亮的节点
setCurrentKey(key) {
// 如果存在当前传入的参数key，则为当前树形控件设置选中的节点
if (key) {
this.$refs.tree.setCurrentKey(key);
// 当前节点发生变化时，触发
this.currentNode(
null,
// 先获取当前被选中节点的key，再根据选中的节点key拿到组件中的node
this.$refs.tree.getNode(this.$refs.tree.getCurrentKey())
);
}
},
}
// current-change 对应的currentNode（）事件
currentNode(val, node) {
const currentType = {
name: node.data.categoryName,
id: node.data.id,
tag: node.level === 1,
sysDefault: node.data.sysDefault,
type: node.data.categoryType,
parentId: node.level === 1 ? '' : node.parent.data.id,
parentName: node.parent.data.categoryName,
parentType: node.parent.data.categoryType,
};
// console.log(val);
// console.log(node);
// console.log(currentType)
this.$emit("currentTypeChange", currentType); // 父子组件传值，第一个值为函数名，第二个值为传的参数名称
}
控制台console.log(val)
控制台console.log(node)
插叙父子组件传值的知识
this.$emit("function", param); //其中function为父组件定义的函数，param为需要传递的参数
父组件
this.$emit("currentTypeChange", currentType);
子组件
<p @currentTypeChange = 'setValue'>
// 或者写成这样，@ 为 v-on：的简写嘛
<p v-on:currentTypeChange = 'setValue'>
data() {
return{
currentType: null,
}
},
methods: {
// currentTypeChange操作对应的函数setValue
// 将值通过val传过来啦，并赋值给子组件的currentType
setValue(val) {
this.currentType = val;
}
}
在这里插入代码片
贴上插槽内部的方法，增加节点，删除节点，编辑节点
// 新增节点
append(data, node) {
this.formVisible = true;
this.formData = {
parentId: data.id,
parentType: data.categoryType,
categoryType: '',
};
},
// 删除节点
remove(node, data) {
if (node.level === 1 && data.child && data.child.length) {
return this.$message.warning("请先删除子类");
}
this.$confirm("确认删除吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
ConfigApi.deleteit(data.id).then(res => {
if (res.code === 200) {
if (node.level ===1) {
this.$ref.tree.remove(this.$refs.tree.getNode(data.id));
if (this.treeData.length > 0) {
this.setCurrentKey(this.treeData[0].id);
this.expandKeys = [this.treeData[0].id];
} else {
this.$emit("currentTypeChange", {
});
}
} else {
this.setCurrentKey(node.parent.data.id);
this.$refs.tree.remove(this.$refs.getNode(data.id));
}
this.$message.success('删除成功')
});
}).catch(() => {
this.$message.info('删除成功');
});
},
// 编辑
edit(node, data) {
this.formVisible = true;
if (node.level != 1) {
data.parentType = node.parent.data.categoryType;
}
this.formData = data;
}