eltable单击变色

最新推荐文章于 2024-06-30 11:06:07 发布

盖被子的冰块

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量335

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/A_Xi_Baa/article/details/119777845

版权

前端开发专栏收录该内容

6 篇文章 3 订阅

订阅专栏

这段代码演示了如何在HTML页面中创建一个使用Element-UI库的表格，展示了包含日期、姓名和地址的数据，并实现了点击行时高亮显示的功能。通过Vue.js的数据绑定和事件监听，当用户点击表格行时，可以突出显示所选行并更新数据。样式部分定义了行被选中时的背景色和鼠标悬停时的背景色。

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

直接新建html就行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div class="demo"></div>
		<div id="app" style="padding: 20px 20px;">
			<el-table :data="tableData" style="width: 100%" highlight-current-row="true" @row-click="openDetails">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>
        </div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					tableData: [{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				}
			},
			methods: {
				openDetails(row) {
					this.crud.selections = [];
					this.crud.selections.push(row);
					this.$refs.table.clearSelection();
					this.$refs.table.toggleRowSelection(row);
				}
			}
		})
	</script>
</html>
<style>

	/* 用来设置当前页面element全局table 选中某行时的背景色*/
	/deep/ .el-table__body tr.current-row>td {
		background-color: #E7F6F5 !important;
	}

	.el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>

盖被子的冰块

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
eltable单击变色

直接新建html就行<!DOCTYPE html><html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div .
复制链接

扫一扫

专栏目录