基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行

实现代码

html 复制代码
<template>
  <div :class="$options.name">
    <el-table
      style="user-select: none"
      ref="table"
      :data="tableData"
      :row-class-name="row_class_name"
      @mousedown.native="mousedownTable"
      @row-click="row_click"
      @cell-mouse-enter="cell_mouse_enter"
      @cell-mouse-leave="cell_mouse_leave"
      @mouseup.native="mouseupTable"
      @mouseleave.native="mouseupTable"
      @selection-change="selection_change"
    >
      <el-table-column type="selection" width="50" :selectable="selectable" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="ID" label="ID" />
      <el-table-column prop="username" label="用户名" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: "sgBody",
  components: {},
  data() {
    return {
      isMousedownTable: false, //是否按下表格
      currentEnterRow: null, //当前移入的行数据
      tableData: [
        { ID: "330110198704103091", username: "username1" },
        { ID: "330110198704103092", username: "username2" },
        { ID: "330110198704103093", username: "username3" },
        { ID: "330110198704103094", username: "username4", disabled: true },
        { ID: "330110198704103095", username: "username5" },
        { ID: "330110198704103096", username: "username6" },
        { ID: "330110198704103097", username: "username7" },
        { ID: "330110198704103098", username: "username8" },
      ],
      selection: [], //表格选中项数组
    };
  },

  methods: {
    // 屏蔽复选框
    selectable(row) {
      return !row.disabled;
    },
    // 表格按下
    mousedownTable(d) {
      this.currentEnterRow &&
        !this.currentEnterRow.disabled &&
        this.$refs.table.toggleRowSelection(this.currentEnterRow);
      this.isMousedownTable = true;
    },
    // 单击表格行
    row_click(row, column, event) {
      this.currentEnterRow || (!row.disabled && this.$refs.table.toggleRowSelection(row));
    },
    // 进入单元格
    cell_mouse_enter(row, column, cell, event) {
      this.isMousedownTable && !row.disabled && this.$refs.table.toggleRowSelection(row);
      this.currentEnterRow = row;
    },
    // 离开单元格
    cell_mouse_leave(row, column, cell, event) {
      this.currentEnterRow = null;
    },
    // 鼠标弹起或者离开表格
    mouseupTable(d) {
      this.isMousedownTable = false;
    },
    // 表格选中项发生改变
    selection_change(selection) {
      this.selection = selection;
    },
    // 表格每行样式
    row_class_name({ row, rowIndex }) {
      if (row.disabled) return "disabled";
      return this.selection.find((v) => v.ID == row.ID) ? "selected" : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.sgBody {
  >>> .el-table {
    $bgColor: #409eff11;
    tr {
      // 高亮选中行
      &:hover,
      &.selected {
        td {
          background-color: $bgColor !important;
        }
      }
      // 禁用行
      &.disabled {
        $bgColor: #eee;
        td {
          background-color: $bgColor !important;
        }
      }
    }
  }
}
</style>
相关推荐
Cacciatore->4 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim4 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端5 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
清幽竹客6 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua6 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8886 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui