vue Element-ui 表格多選 修改選中行背景色

實現的效果：

 

整體思路方式：

　　1、給獲取到的數據添加自定義的className

　　2、在點擊行(row-click)和手動點擊勾選框的事件(select-all)中獲取到當前的row的className,直接修改className即可  點擊查看事件說明

　　3、在行的 className 的回調方法中(row-class-name)直接返回className

　　註：還有另一種方式通過獲取row進行循環，判斷當前點擊row的id或者index與數據的是否相等，然後存放點擊後的row到新的數組中，這種方式因為觸及到遍歷。當我有500行數據或者很多行數據，可想而知這裡要遍歷多少次，還有另一個就是連續點行的顏色發生變化會有延遲，相對來說性能就不好了。

步驟如下：

　　1、給數據添加自定義className, 由於這裡演示的是本地數據，是直接添加的className; 真實開發是通過介面去載入數據，獲取到的數據 直接遍歷 賦值就可以，後面就不用管遍歷了

data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
      ],
      multipleSelection: [],
    };

　　2、點擊行和點擊勾選框的事件

methods: {

  //點擊行觸發，切換複選框狀態
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

   // 手動點擊勾選框觸發的事件
    handleSelect(selection, row) {
      // selection,row  傳遞兩個參數，row直接是對象
      // 只傳一個參數得到的是數組
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },  

}

　　3、className的回調方法

methods: {
    // 選中背景色
    tableRowClassName({ row }) {
      return row.className;
    },
}

　　4、最後不要忘了寫顏色類名喔

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

　　完整程式碼：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @row-click="handleRowClick"
    @select="handleSelect"
    :row-class-name="tableRowClassName"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          className: "normal",
        },
      ],
    };
  },
  methods: {
    // 手動點擊勾選框觸發的事件
    handleSelect(selection, row) {
      // selection,row  傳遞兩個參數，row直接是對象
      // 只傳一個參數得到的是數組
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

    // 選中背景色
    tableRowClassName({ row }) {
      return row.className;
    },

    //點擊行觸發，切換複選框狀態
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },
  },
};
</script>

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

View Code

 

Tags:

VirMach 便宜 VPS

QNews

QNews