一、功能描述:可实现树节点内容修改、增加节点、删除节点等,根据层级不同显示不同的图标等,已封装成组件。
<template>
<div class="treelistitem">
<el-tree
:data="data"
node-key="id"
:render-content="renderContent"
@node-click="handleNodeClick"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
currentId: "",
currentName: "",
addName: "",
open: false,
};
},
props: {
data: {
type: Array,
default: () => [],
},
deletefn: {
type: Function,
},
edietFn: {
type: Function,
},
addFn: {
type: Function,
},
getId: {
type: Function,
},
opreateId: {
type: Number,
default: 0,
},
},
methods: {
prevent() {
this.currentId = "";
},
ok(data, node) {
if (data.text == this.currentName) {
this.currentId = "";
return false;
}
let edietData = {
data,
node,
name: this.currentName,
id: this.currentId,
};
this.$emit("edietFn", edietData);
data.text = this.currentName;
this.currentId = "";
},
handleNodeClick(val) {
this.$emit("getId", val.id);
},
handleInput(val) {
this.currentName = val;
},
handClick(value, data, node) {
if (value == "1") {
this.currentId = data.id;
this.currentName = data.text;
} else if (value == "2") {
let addData = { data, node };
this.$emit("addFn", addData);
} else {
this.$confirm("确定删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$emit("deletefn", data);
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
children.splice(index, 1);
})
.catch(() => {});
}
},
renderContent(h, { node, data, store }) {
return (
<div class="custom-tree-node" style={{ width: "100%" }}>
{!data.son ? (
node.expanded ? (
<i class="el-icon-folder-opened" ></i>
) : (
<i class="el-icon-folder" ></i>
)
) : (
<i class="el-icon-document" ></i>
)}
{this.currentId === data.id ? (
<el-input
value={this.currentName}
on-input={this.handleInput}
style={{ width: "40%" }}
></el-input>
) : (
<el-tooltip effect="dark" content={data.text} placement="top">
<span class="custom-tree-node-text">{data.text}</span>
</el-tooltip>
)}
{this.currentId === data.id ? (
<span
style={{ paddingLeft: "10px" }}
class={this.opreateId != 3 ? "showTreeList" : "hideTreeList"}
>
<el-button
type="info"
icon="el-icon-circle-close"
class="btnreturn"
circle
size="mini"
on-click={this.prevent}
></el-button>
<el-button
type="primary"
size="mini"
icon="el-icon-check"
class="btnsearch"
circle
on-click={() => {
this.ok(data, node);
}}
></el-button>
</span>
) : (
<el-dropdown
style={{ float: "right", paddingRight: "10px" }}
class={this.opreateId != 3 ? "showTreeList" : "hideTreeList"}
on-command={(value) => {
this.handClick(value, data, node);
}}
>
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="1"
class={
data.attributes.fatherId == 0
? "hideCommand"
: "showCommand"
}
>
<i class="el-icon-edit"></i>
</el-dropdown-item>
<el-dropdown-item command="2">
<i class="el-icon-plus"></i>
</el-dropdown-item>
<el-dropdown-item
command="3"
class={
data.attributes.fatherId == 0
? "hideCommand"
: "showCommand"
}
>
<i class="el-icon-delete"></i>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
)}
</div>
);
},
},
};
</script>
<style lang="scss" >
.el-tree > .el-tree-node {
min-width: 100%;
display: inline-block;
}
.showCommand {
display: inline-block;
}
.hideCommand {
display: none;
}
.treelistitem.showTreeList {
display: inline-block;
}
.treelistitem .hideTreeList {
display: none;
}
.treelistitem .el-tree {
width: 100% !important;
}
.treelistitem .el-dropdown {
float: right;
padding-right: 10px;
}
.treelistitem .custom-tree-node {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
}
.treelistitem .custom-tree-node .custom-tree-node-text {
width: 60%;
height: 30px;
padding-left: 10px;
padding-bottom: 0.5px;
display:inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.treelistitem .el-tree-node__content {
height: 50px !important;
}
.treelistitem .el-input {
height: 20px;
margin-top: -20px;
margin-left: 10px;
}
.treelistitem .el-input__inner {
height: 30px;
}
</style>
二、调用组件示例:
<my-tree
:data="treeList"
:opreateId="roleId"
@deletefn="delTree"
@edietFn="updateTree"
@addFn="addTree"
@getId="getTreeId">
</my-tree>
三、效果图如下:
文章来源地址https://www.toymoban.com/news/detail-610632.html
文章来源:https://www.toymoban.com/news/detail-610632.html
到了这里,关于Element Ui 树形组件自定义样式与功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!