[element-ui] 把Tree 树形控件修改成表格，实现展开多选操作

彩蛋：后台管理系统一站式平台模板

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>