[JavaScript知识库]element 之 table表格选中加背景色

 <el-table
              ref="dragTable"
              :data="list"
              @selection-change="statisticsHandleChange"
              :max-height="tableHeight"
              @header-dragend="headerDragend"
              border
              stripe
              show-summary
              :summary-method="getSummaries"
              **@select="handleSelect"
              :row-class-name="tableRowClassName"**
              highlight-current-row
            >
              <el-table-column
                class-name="cannotDrag"
                type="selection"
                width="55"
              />
              <el-table-column
                class-name="cannotDrag"
                label="序号"
                width="55"
                type="index"
              />
              <el-table-column
                v-for="item in confirmHead"
                :key="item.label"
                :label="item.label"
                :prop="item.prop"
                :width="item.width"
                align="center"
                show-overflow-tooltip
              >
            </el-table>

 // 打钩事件
    statisticsHandleChange(selection) {
      if (selection.length > 0) {
        selection.forEach((item) => {
          item.className = "tableSelectedRowBgColor";
        });
      } else {
        this.list.forEach((item) => {
          item.className = "normal";
        });
      }
    },

   // 手动点击勾选框触发的事件
    handleSelect(selection, row) {
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },
    // 选中背景色
    tableRowClassName({ row }) {
      return row.className;
    },

<style>
.tableSelectedRowBgColor td {
  background-color: #b0daee !important;
}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖