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>

效果如图所示:

相关推荐
麦麦大数据19 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
fhsWar1 天前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
阿珊和她的猫1 天前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
@AfeiyuO1 天前
el-table 表格嵌套表格
前端·elementui·vue
麦麦大数据2 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区2 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长2 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据2 天前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110162 天前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin
疯狂的沙粒2 天前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节