59、table移动高亮

<template>
  <div>
    <div>
      <el-button class="btn" icon="el-icon-caret-top" @click="moveUpward"
        >卡片上移</el-button
      >
      <el-button class="btn" icon="el-icon-caret-bottom" @click="moveDown"
        >卡片下移</el-button
      >
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      :row-class-name="tableRowClassName"
      tooltip-effect="dark"
      style=" 100%"
      @select="onRowSelect"
      @selection-change="handleSelectionChange"
    >
      <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>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([list[1], list[2], list[3]])"
        >切换第二、第三行、第四行的选中状态</el-button
      >
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: undefined,
      list: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
    };
  },

  methods: {

    //选择数据添加背景样式
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
      if (this.multipleSelection.includes(row)) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },

  //表格数据下移
    moveDown(row, index) {
      if (
        this.multipleSelection.length === 0 ||
        this.multipleSelection.length > 1
      ) {
        this.$message("请选择一条数据进行操作");
        return;
      }

      // eslint-disable-next-line no-redeclare
      var index = this.index;
      if (index + 1 === this.list.length) {
        this.$message("已经是最后一条，下移失败");
      } else {
        this.index = index + 1;
        const downData = this.list[index + 1];
        const arr = this.list;
        arr.splice(index + 1, 1);
        arr.splice(index, 0, downData);
        this.list = arr;
      }
    },


    //表格数据上移
    moveUpward() {
      if (
        this.multipleSelection.length === 0 ||
        this.multipleSelection.length > 1
      ) {
        this.$message("请选择一条数据进行操作");
        return;
      }
      var index = this.multipleSelection[0].index;
      if (index > 0) {
        this.index = index - 1;
        const upData = this.list[index - 1];
        const arr = this.list;
        arr.splice(index - 1, 1);
        arr.splice(index, 0, upData);
        this.list = arr;
      } else {
        this.$message("已经是第一条，上移失败");
      }
    },


  //选中表格数据和取消表格数据选样式
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //当前别选择的数据标志
    onRowSelect(selection, row) {
      this.index =row.index;
    },
  },
};

// 模式样式还必须设置成全局
</script>

<style>
.el-table .warning-row {
  background: rgb(252, 212, 139);
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>