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

在Element UI的el-table组件中，可以通过监听鼠标事件来实现行的选中和取消选中。以下是一个简单的示例，展示了如何使用鼠标事件来控制行的选中状态：

<template>
  <el-table
    :data="tableData"
    @row-mouseenter="handleRowMouseEnter"
    @row-mouseleave="handleRowMouseLeave"
    @selection-change="handleSelectionChange"
    row-key="id"
    ref="multipleTable"
    :highlight-current-row="false"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', ... }, ...], // 数据源
      currentRow: null, // 当前鼠标悬浮的行
    };
  },
  methods: {
    handleRowMouseEnter(row, event, column) {
      this.currentRow = row;
    },
    handleRowMouseLeave(row, event, column) {
      this.currentRow = null;
    },
    handleSelectionChange(selection) {
      if (this.currentRow) {
        const isSelected = selection.some(item => item.id === this.currentRow.id);
        if (!isSelected) {
          this.$refs.multipleTable.toggleRowSelection(this.currentRow, true);
        }
      }
    },
  },
};
</script>

在这个示例中，我们定义了一个名为currentRow的数据属性来存储鼠标悬浮的行。通过@row-mouseenter和@row-mouseleave事件处理函数handleRowMouseEnter和handleRowMouseLeave来更新currentRow。另外，通过@selection-change事件来监听选中状态的变化，并在必要时通过toggleRowSelection方法来选中或取消选中currentRow。

请注意，这个示例假设每行数据都有一个唯一的id属性，用作row-key的值。根据你的数据结构，你可能需要调整这部分代码以适应你的数据。