彩蛋:后台管理系统一站式平台模板
vue-admin-wonderful,一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0
未作树的
懒加载
效果,没有这个需求,下面可做参考。
1、效果图
2、全部代码
<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 class="tree-head-one">商品 ID</div>
<div style="flex: 1;display: flex;">
<div class="tree-head-two">商品名称</div>
<div class="tree-head-three">描述</div>
</div>
</div>
<el-tree :data="treeData" show-checkbox node-key="id" ref="treeTable" :props="treeDefaultProps" @check="onCheckTree">
<span class="tree-custom-node" slot-scope="{ node, data }">
<span style="flex: 1;">{{ node.label }}</span>
<span v-if="data.isShow" style="flex: 1;display: flex;">
<span type="text" size="mini" style="flex: 1;">{{ data.label1 }}</span>
<span type="text" size="mini" style="flex: 1;">{{ data.label2 }}</span>
</span>
</span>
</el-tree>
</div>
<el-button @click="onSelect" style="margin-top: 15px;">选择元素</el-button>
</el-card>
</template>
<script>
export default {
name: 'tree',
data() {
return {
checkAll: false,
loading: false,
treeData: [],
treeDefaultProps: {
children: 'children',
label: 'label'
},
treeSelArr: [],
treeLength: 0
};
},
created() {
this.getTreeData();
},
methods: {
// 初始化树的长度
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: '荷兰优质淡奶,奶香浓而不腻',
isShow: true,
children: [
{
id: 11,
label: '一级 1-1'
},
{
id: 12,
label: '一级 1-2'
}
]
},
{
id: 2,
label: '12987122',
label1: '好滋好味鸡蛋仔',
label2: '荷兰优质淡奶,奶香浓而不腻',
isShow: true,
children: [
{
id: 21,
label: '二级 2-1',
isShow: false
},
{
id: 22,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '12987123',
label1: '好滋好味鸡蛋仔',
label2: '荷兰优质淡奶,奶香浓而不腻',
isShow: true,
children: [
{
id: 31,
label: '二级 3-1'
},
{
id: 32,
label: '二级 3-2'
},
{
id: 33,
label: '二级 3-3'
}
]
}
];
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>