当前位置：首页 > news >正文

element table 表格多选框选中高亮

news 2025/8/21 13:40:50

需求：
点击当前行不显示高亮，但是选中行要高亮，实现如下：
1、禁止点击当前行高亮。
设置highlight-current-row为false。

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

<el-table class="list-table" :data="tableData"@selection-change="handleSelectionChange":row-style="rowClass":highlight-current-row="highlightCurrentRow":row-class-name="tableRowClassName"><el-table-columntype="index"width="55"label='序号'></el-table-column><el-table-columntype="selection"width="60":selectable="isSelectable"></el-table-column><el-table-columnprop="paxName"width="100"label="姓名"></el-table-column>
</el-table>

<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>