ElementuiTree树形控件删除功能
vue-element-admin⼀个基于 vue2.0 和 Eelement 的控制⾯板 UI 框架，这是使⽤vue技术栈开发的前端程序员的⾸选管理系统模板，模板以及⾮常的成熟了，并且有相关的社区和维护⼈员，开发时候遇到问题也不要慌。
今天就来说⼀下，怎么使⽤Tree Table 树形表格。废话不多说，⾸先看⼀下官⽅⽂档吧，看看官⽅⽂档是怎么给到的例⼦吧：
功能：当⿏标划过Tree 树形控件的节点的时候，会出现⼀个删除的按钮
点击删除按钮，会出现弹框询问是否删除
选中删除，则删除树节点(最上层的⽗节点不可删除)
1：在views底下新建⼀个test⽂件夹
⾥⾯新建⼀个vue⽂件和⼀个json⽂件
2：使⽤
mock.json
{
"msg": "success",
"code": 1,
"data": [
{
"id": 1,
"organName": "yy有限公司", "parentId": 0,
"manager": "zs",
"phone": "zs",
"companyId": 1,
"address": null
},
{
"id": 2,
"organName": "test311",
"parentId": 1,
"manager": "zs",
"phone": "21",
"companyId": 1,
"address": null
},
{
"id": 10,
"organName": "test4",
"parentId": 1,
"manager": "zs",
"phone": null,
"companyId": 1,
"address": null
},
{
"id": 11,
"organName": "2121",
"parentId": 1,
"manager": "212",
"phone": "136********", "companyId": 1,
"address": null
},
{
"id": 12,
"organName": "212121212", "parentId": 2,
"manager": "212",
"phone": "136********", "companyId": 1,
"address": null
},
{
"id": 13,
"organName": "www46", "parentId": 11,
"manager": "ww",
"phone": "123",
"companyId": 1,
"address": null
},
{
"id": 14,
"organName": "www",
"parentId": 11,
"manager": "ww",
"phone": "123",
"companyId": 1,
"address": null
},
{
"id": 15,
"organName": "",
"parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 16,
"organName": "21212", "parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 17,
"organName": "2131314", "parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 18,
"organName": "q313",
"parentId": 2,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 19,
"organName": "8888",
"parentId": 1,
"manager": "11",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 20,
"organName": "21",
"parentId": 1,
"manager": "12",
"phone": "21",
"companyId": 1,
"address": null
},
{
"id": 21,
"organName": "wwww", "parentId": 1,
"manager": "www",
"phone": "136********", "companyId": 1,
"address": null
},
{
"id": 22,
"organName": "1313",
"parentId": 1,
"manager": "313",
"phone": "31",
"companyId": 1,
"address": null
},
{
"id": 23,
"organName": "test",
"parentId": 1,
"manager": "zs",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 24,
"organName": "test_01",
"parentId": 23,
"manager": "zs",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 25,
"organName": "w121",
"parentId": 1,
"manager": "212",
"phone": "212",
vue element admin"companyId": 1,
"address": null
}
]
}
3:
test.vue
<template>
<div>
<el-col :span="6">
<div class="ztree">
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@node-click="nodeClickHandler" @check="checkHandler"
:
render-content="renderContent" >
</el-tree>
</div>
</el-col>
</div>
</template>
<script>
//调⽤接⼝
//调⽤接⼝
// import { deleteSubject } from "@/api/data/organ";
export default {
data() {
return {
setTree: [],
defaultProps: {
children: "children",
label: "organName",
},
treeData: [],
organList: [],
};
},
created() {
//加载部门管理节点接⼝定义
},
methods: {
renderContent(h, { node, data, store }) {
console.log(data);
return (
<span
class="custom-tree-node"
on-mouseenter={() => (data.isHover = true)}
on-mouseleave={() => (data.isHover = false)}
>
<span>{anName}</span>
{data.parentId !== 0 && data.isHover && (
<i
class="el-icon-error danger"
on-click={(e) => {
e.stopPropagation();
}}
></i>
)
}
</span>
);
},
remove(node, data) {
this.$confirm("此操作将永久删除该条⽬, 是否继续?", "提⽰", { confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.handleDelete(null, data);
if (data.parentId === 0) {
return;
}
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id); children.splice(index, 1);
// 发请求删除
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论