<template>
<el-card class="tree-card" shadow="never">
<div v-loading="loading">
<div class="tree-head">
<!-- <div class="tree-head-check">
<el-checkbox v-model="checkAll" @change="onCheckAllChange"></el-checkbox>
</div>-->
<div style="flex: 1;display: flex;">
<div class="tree-head-one">ID</div>
<div class="tree-head-one">CL Name (CN)</div>
<div class="tree-head-one">CL Short Name (CN)</div>
<div class="tree-head-one">CL Code</div>
<div class="tree-head-one">BU</div>
<div class="tree-head-one">Product Group</div>
<div class="tree-head-one">Product</div>
<div class="tree-head-one">Interest Rate Type</div>
<div class="tree-head-one">Limit Amount</div>
<div class="tree-head-one">Used Amount</div>
<div class="tree-head-one">Available Amount</div>
<div class="tree-head-one">Use Parent Limit</div>
<div class="tree-head-one">Currency</div>
<div class="tree-head-one">Remark</div>
<div class="tree-head-one">Status</div>
<div class="tree-head-one">CL Name (EN)</div>
<div class="tree-head-one">CL Short Name (EN)</div>
<div class="tree-head-one">Version</div>
<div class="tree-head-one">InsertTime</div>
<div class="tree-head-one">CreateBy</div>
<div class="tree-head-one">UpdateBy</div>
<div class="tree-head-one">LastUpdateTime</div>
<div class="tree-head-one">操作</div>
</div>
</div>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
ref="treeTable"
:expand-on-click-node="false"
>
<span class="tree-custom-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>{{ data.label1 }}</span>
<span>{{ data.label2 }}</span>
<span type="text" size="mini">
<el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
</span>
</span>
</el-tree>
</div>
</el-card>
</template>
<script>
let id = 1000;
export default {
name: "tree",
data() {
return {
checkAll: false,
loading: false,
treeData: []
// treeDefaultProps: {
// children: "children",
// label: "label"
// },
// treeSelArr: [],
// treeLength: 0
};
},
created() {
this.getTreeData();
},
methods: {
append(data) {
const newChild = { id: id++, label: "testtest", children: [] };
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
},
remove(node, data) {
debugger;
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button
size="mini"
type="text"
on-click={() => this.append(data)}
>
Append
</el-button>
<el-button
size="mini"
type="text"
on-click={() => this.remove(node, data)}
>
Delete
</el-button>
</span>
</span>
);
},
// 初始化树的长度
// initTreeLengh(arr) {
// let count = 0;
// arr.map(item => {
// if (item.children) {
// count += item.children.length;
// }
// });
// this.treeLength = count + arr.length;
// },
// 全选改变时
// onCheckAllChange() {
// if (this.checkAll) {
// this.$refs.treeTable.setCheckedNodes(this.treeData);
// } else {
// this.$refs.treeTable.setCheckedKeys([]);
// }
// },
// 节点选中状态发生变化时的回调
// onCheckTree() {
// this.treeSelArr = [];
// this.treeSelArr = this.$refs.treeTable.getCheckedNodes();
// this.treeSelArr.length == this.treeLength
// ? (this.checkAll = true)
// : (this.checkAll = false);
// },
// 选择元素按钮
// onSelect() {
// let treeArr = this.$refs.treeTable.getCheckedNodes();
// if (treeArr.length <= 0) {
// this.$message.warning("请选择元素");
// return;
// } else {
// console.log(this.$refs.treeTable.getCheckedNodes());
// }
// },
// 获取数据
getTreeData() {
this.treeData = [
{
id: 1,
label: "12987121",
label1: "好滋好味鸡蛋仔",
label2: "荷兰优质淡奶,奶香浓而不腻",
children: [
{
id: 11,
label: "一级 1-1"
},
{
id: 12,
label: "一级 1-2"
}
]
},
{
id: 2,
label: "12987122",
label1: "好滋好味鸡蛋仔",
label2: "荷兰优质淡奶,奶香浓而不腻",
children: [
{
id: 21,
label: "二级 2-1",
isShow: false
},
{
id: 22,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "12987123",
label1: "好滋好味鸡蛋仔",
label2: "荷兰优质淡奶,奶香浓而不腻",
children: [
{
id: 31,
label: "二级 3-1"
},
{
id: 32,
label: "二级 3-2"
},
{
id: 33,
label: "二级 3-3"
}
]
}
];
// this.treeData = JSON.stringify(this.treeData)
// this.initTreeLengh(this.treeData);
}
}
};
</script>
<style>
/*处理css, 使用 scss, 加上 scoped*/
.tree-card {
height: 100%;
background-color: #ffffff;
padding: 27px 23px;
}
.tree-card .el-card__body {
padding: 0;
}
.tree-head {
background-color: #f8f8f8;
line-height: 40px;
height: 40px;
border: 1px solid #dcdee3;
border-bottom: none;
display: flex;
font-size: 14px;
color: #606266;
padding-right: 8px;
}
.tree-head-check {
width: 38px;
text-align: right;
}
.tree-head-one,
.tree-head-two,
.tree-head-three {
flex: 1;
}
.tree-head-one {
padding-left: 8px;
}
.tree-custom-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.el-tree {
overflow: hidden;
}
.el-tree .el-tree-node {
border: 1px solid #dcdee3;
border-bottom: none;
}
.el-tree {
border-bottom: 1px solid #dcdee3;
}
.el-tree-node__children .el-tree-node {
border: none;
}
.el-tree-node__content {
line-height: 40px !important;
height: 40px !important;
}
.el-tree-node__children .el-tree-node__content {
border-top: 1px solid #dcdee3;
}
.el-tree-node:focus > .el-tree-node__content {
background-color: #ffffff !important;
}
</style>
树形表格demo
最新推荐文章于 2022-05-08 18:53:24 发布
这是一个关于Vue.js的博客,展示了如何创建一个包含自定义节点操作(如添加和删除)的树形组件。代码示例中,``组件用于展示数据,包括ID、名称、描述等属性,并提供了全选和节点状态变化的处理方法。此外,还定义了样式以增强用户体验。
摘要由CSDN通过智能技术生成