vue+element table组件点击行选中同时高亮_vue3中实现el-table通过ctrl或shift批量选择节点并高亮展示

<template>
  <div class="compoent-content">
    <!--数据展示部分-->
    <div class="formList">
      <el-table
        ref="elTable"
        v-loading="listLoading"
        :key="tableKey"
        :data="optionsList"
        :empty-text="emptyText"
        border
        stripe
        fit
        highlight-current-row
        max-height="300"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @select="handleSelect"
        @select-all="handselectall"
        @row-click="handleClick"
      >
        <el-table-column type="selection" align="center" width="55" fixed />
        <el-table-column label="预约选项" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.text }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
import { handleMessage, handleConfirm, handleNotify } from "@/utils/popup";
import { queryDataDicsApi } from "@/api/common";
import { isNullOfEmpty } from "@/utils/index";
 
export default {
  name: "options",
  props: {
    list: {
      type: Object,
      // default: ()=>{}
    },
  },
  data() {
    return {
      tableKey: 0, // 表格唯一标识
      optionsList: [],
      temp: {
        id: undefined,
        text: "",
      },
      listLoading: false,
      emptyText: "暂无数据",
      keyword: "",
      selArr: [],
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 请求列表数据
      this.listLoading = true;
      this.emptyText = "暂无数据";
      const dicType = "5";
      queryDataDicsApi(dicType)
        .then((response) => {
          this.listLoading = false;
          const res = response.data;
          if (res.code === 1) {
            let optionsList = res.data;
            var newArray = optionsList.map((item, index) => {
              return Object.assign(item, { className: "normal" });
            });
            this.optionsList = newArray;
            //表格错位重排
            this.$nextTick(() => {
              this.$refs.elTable.doLayout();
            });
          } else {
            handleMessage("请求数据失败：" + res.msg, "error");
          }
        })
        .catch((err) => {
          this.listLoading = false;
          this.emptyText = "请求出错：" + err.message;
        });
    },
    // 变色样式监听
    tableRowClassName({ row, rowIndex }) {
      let color = "";
      for (let item of this.selArr.values()) {
        if (item.id === row.id) color = "table-SelectedRow-bgcolor";
      }
      return color;
    },
    // 全选变色
    handselectall(val) {
      this.handleSelect(val);
    },
    /*  获取当前选中的数据 */
    handleSelect(row) {
      this.selArr = [];
      if (row.length > 0) {
        row.forEach((value, index) => {
          this.selArr.push(value);
        });
      }
      this.$emit("optionsClick", this.selArr);
    },
    handleClick(row) {
      let findRow = this.selArr.find((c) => c.id == row.id);
      if (findRow) {
        let findIndex = undefined;
        this.selArr.forEach((item, index) => {
          if (item.id == findRow.id) {
            findIndex = index;
          }
        });
        this.selArr.splice(findIndex, 1);
        this.$refs.elTable.toggleRowSelection(row, false);
        this.$emit("optionsClick", this.selArr);
        return;
      }
      this.selArr.push(row);
      this.$refs.elTable.toggleRowSelection(row, true);
      this.$emit("optionsClick", this.selArr);
    },
    clearFrom() {
      this.selArr = [];
      this.$refs.elTable.clearSelection();
      this.$refs.elTable.setCurrentRow();
    },
  },
};
</script>
 
<style lang="scss" scoped>
.compoent-content {
  margin: 0 auto;
  width: 65%;
  .type-item {
    position: relative;
    float: left;
    padding: 0px 18px;
    margin-right: 28px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .add-icon {
    font-size: 20px;
    cursor: pointer;
  }
  .submit {
    text-align: center;
    box-sizing: border-box;
  }
}
/deep/ {
  .table-SelectedRow-bgcolor {
    td {
      background-color: #69a8ea !important;
      color: #fff;
    }
  }
}
</style>