表格树 element el-table

最新推荐文章于 2024-07-29 14:49:14 发布

王懿诺

最新推荐文章于 2024-07-29 14:49:14 发布

阅读量223

点赞数

分类专栏： elementui 文章标签： elementui

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/130805851

版权

elementui 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章展示了如何在Vue.js中使用el-table组件创建一个树形表格，包括数据绑定、列定义、自定义操作按钮以及通过CSS控制展开状态的图标。同时，文章提到了children属性用于表示子节点，handleDelete()方法处理删除操作。

摘要由CSDN通过智能技术生成

<el-table row-key="id"  :data="tableData" style="width: 940px" :show-header="false"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

	<el-table-column prop="name" width="600px">
	</el-table-column>

	<el-table-column align="right">
		<template>
			<el-button type="primary" size="small" @click="handleDelete()" plain>做题</el-button>
		</template>
	</el-table-column>
</el-table>

tableData: [{
						id: 1,
						name: '建设工程项目的组织与管理',
						children: [{
							id: 1-1,
							name: '1Z201000建设工程项目的组织与管理',
						}, {
							id: 1-2,
							name: '1Z201000建设工程项目的组织与管理',
						}],
					},
					{
						id: 2,
						name: '1Z201000建设工程项目的组织与管理',
						children: [{
							id: 2-1,
							name: '1Z201000建设工程项目的组织与管理',
						}, {
							id: 2-2,
							name: '1Z201000建设工程项目的组织与管理',
						}],
					}
				],

css

// 树形结构
	//有子节点 且未展开
	.el-table/deep/ .el-icon-arrow-right:before {
		background: url('@/static/image/+.png') no-repeat 0px 0px;
		content: '';
		display: block;
		width: 14px;
		height: 14px;
		font-size: 14px;
		background-size: 14px;
	}

	//有子节点 且已展开
	.el-table/deep/ .el-table__expand-icon--expanded {
		.el-icon-arrow-right:before {
			background: url('@/static/image/-.png') no-repeat 0px 0px;
			content: '';
			display: block;
			width: 14px;
			height: 14px;
			font-size: 14px;
			background-size: 14px;
		}
	}

	//没有子节点
	.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before .el-table/deep/.el-table__placeholder::before {
		background: url('@/static/image/-.png') no-repeat 0px 0px;
		content: '';
		display: block;
		width: 14px;
		height: 14px;
		font-size: 14px;
		background-size: 14px;
	}