基于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>
相关推荐
清风细雨_林木木16 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
前端农民工ws2 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育2 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿4 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11254 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_5 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手5 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js