element-plus el-table 点击单行修改背景色

需求描述:

element-plus + el-table 点击行选中并修改背景色+文字颜色

代码实现:

方法一:

重点:

  • highlight-current-row


/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  color: #28A458;
  background: rgb(197, 213, 255) !important;
}

element-plus 本身有给提供这个功能,而且比第二个方法更好用,第二个方法在有列固定的情况下,样式会不生效,所以建议直接用第一种

方法二:

重点:

  • @row-click
  • :row-style

const state = reactive({
	checkNumber: "",  // 存储选中的
})

// 单击选中一行
const handleSelect = (row: getRecordItem) => {
  state.checkNumber = row.checkNumber;  // 我这里 checkNumber 是唯一的
};

// 更改选中行背景色
const cellStyle = (row: any) => {
  if (state.checkNumber === row.row.checkNumber) {  // 注意!!!这里是 row.row.checkNumber
    return {
      backgroundColor: "rgb(197, 213, 255) !important",
      color: "#28A458 !important",
      cursor: "pointer",
    };
  }
  return { cursor: "pointer" };
};

你可能感兴趣的:(Vue,vue.js,前端,javascript)