vue3 笔记| el-table 控件 选中行高亮 设置选中行样式 获取选中行索引_el-table选中高亮

选中行高亮 并且改样式

<el-table :row-class-name="tableRowClassName" //获取索引，赋值用的
          :data="PeopleRt_noList"
	      :header-cell-style="{background:'#A6A6A6',color:'#FFF', fontSize: '15px', fontWeight: 'bold',  textAlign: 'center' ,border: '1px solid #A6A6A6'}"
		  @row-click="selrow"  
          border 
         :table-layout="auto"
		 :cell-style="{'text-align':'center' }" max-height="17.5vh" ref="Ttable" 
         style="width: 100%" 
         :row-key="getRowKey"
		 highlight-current-row //这句选中行不同颜色
         >
						<el-table-column label="图示" width="180">
						    <template #default="{ row }">
						      <img :src="getPic(row.picrt)" alt="无图" width="100" height="50">
						    </template>
						  </el-table-column>
						<el-table-column prop="rt_no" label="工序" width="180" />
						<el-table-column prop="rt_name" label="名称" />
					</el-table>

然后在style中 设置选中行样式

<style>
::v-deep .el-table__body tr.current-row>td {
		background: #BDDBBB !important;
	}
</style>

获取选中行索引

el-table :row-class-name="tableRowClassName" 加上这句

然后在

<script>
methods:{
tableRowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex;
			},
	selrow(row, column, event) {
				// 处理点击事件的逻辑
				// const rowIndex = event.target.parentNode.rowIndex ;
				console.log('选中行的下标:' + row.index);
				 this.dialogtablechange(row.index);
				// 其他逻辑...
			},
}
</script>