el-table 勾选改变 勾选行 的样式。hover改变样式

第一种：勾选改变样式

效果图：

代码如下：

在el-table 中写一行代码：

然后在script里写上：

 然后就实现了

源码如下：

<el-table
	ref="tableRef"
    :data="data"
	:border="setBorder"
	v-bind="$attrs"
	row-key="id"
	stripe
	style="width: 100%"
	:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
	v-loading="config.loading"
	@selection-change="onSelectionChange"
	:row-style="isChooseStyle"
>

// 表格多选改变时，用于导出
const onSelectionChange = (val: EmptyObjectType[]) => {
	state.selectlist = val;
	emit('selectChange', state.selectlist);
};
//多选时候，勾选的改变样式
const isChooseStyle = ({row})=>{
	const checkIdList = state.selectlist.map((item) => item.id); //拿到原本数组的id
      if (checkIdList.includes(row.id)) { //includes用于搜索筛选关键字 后把数据重新渲染列表
        return {
          color: "var(--el-color-primary) !important",
        };
      }
}

第二种：hover改变样式

 

.el-table {
		flex: 1;
		:deep(tbody tr:hover>td ){ 
			color:var(--el-color-primary) !important;
		} 
        XXXX.....其他样式
}

以上就是全部内容了，欢迎补充