element table 表格多选框选中高亮

需求:

点击当前行不显示高亮,但是选中行要高亮,实现如下:

1、禁止点击当前行高亮。

设置highlight-current-row为false。

2、设置多选时,选中行高亮:

使用官网提供的highlight-selection-row为true,发现并不起作用,选中时并不显示高亮,所以尝试另一种方法实现,通过highlight-current-row、selection-change和row-style实现,具体实现如下:

html 复制代码
<el-table class="list-table" :data="tableData"
	@selection-change="handleSelectionChange"
	:row-style="rowClass"
	:highlight-current-row="highlightCurrentRow"
	:row-class-name="tableRowClassName">
	<el-table-column
		type="index"
		width="55"
		label='序号'
	></el-table-column>
	<el-table-column
		type="selection"
		width="60"
		:selectable="isSelectable"
	></el-table-column>
	<el-table-column
		prop="paxName"
		width="100"
		label="姓名"
	></el-table-column>
</el-table>
javascript 复制代码
<script>
export default {
	name: 'ceshi',
	data() {
		return {
			tableData: [
				{ paxName: '孟军'},
				{ paxName: '王红光'},
				{ paxName: '曹永友'},
				{ paxName: '肖珍平'},
				{ paxName: '白永忠'},
				{ paxName: '许一君'},
	        ],
			selectRow: [],
			highlightCurrentRow: false,
			selectedFlightRow: [], // 选中要操作的数据
		}
	},
	watch: {
		selectedFlightRow(data){
		 	this.selectRow = []
		 	if(data.length > 0){
		 		data.forEach((item,index)=>{
		 			this.selectRow.push(this.tableConfig.tableData.indexOf(item))
		 		})
		 	}
		 }
	},
	methods: {
		// 选中
		handleSelectionChange(val) {
			this.selectedFlightRow = val;
		},
		rowClass({row,rowIndex}){
			if(this.selectRow.includes(rowIndex)){
				return {"background": "#ecf5ff"}
			}
		},
	}
<script>

效果如图所示:

相关推荐
在逃的吗喽1 小时前
Vue3新变化
前端·javascript·vue.js
Demoncode_y2 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
茶憶3 小时前
uniapp 请求接口封装和使用
vue.js·uni-app
岁月宁静3 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
码农飞哥3 小时前
AI编程开发系统001-基于SpringBoot+Vue的旅游民宿租赁系统
vue.js·spring boot·毕业设计·ai编程·计算机源码
光影少年3 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
小高0075 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
我是日安6 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
吹晚风吧6 小时前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
小*-^-*九10 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron