Eltable 如何实现鼠标拖拽选中

Eltable 可以通过绑定 mousedown、mousemove 和 mouseup 事件来实现鼠标拖拽选中的功能。具体实现方法是：在 mousedown 事件中获取鼠标按下时的位置，并绑定 mousemove 事件，在 mousemove 事件中不断计算出鼠标移动的距离，并根据这个距离计算出选中的单元格范围，在 mouseup 事件中取消绑定 mousemove 事件，完成选中操作。

相关问题

eltable selection 默认选中

您好！对于 eltable 的默认选中，您可以使用 eltable 组件的 selection 属性来实现。设置 selection 属性为一个数组，数组中的元素表示被选中的行的唯一标识符。例如，如果您想要默认选中第一行，可以将 selection 属性设置为包含第一行标识符的数组。以下是一个示例代码：

<template>
  <el-table :data="tableData" :selection="defaultSelection">
    <!-- 表格列配置 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      defaultSelection: ['row1'] // 默认选中第一行
    }
  }
}
</script>

以上代码将会默认选中标识符为 'row1' 的行。您可以根据实际情况修改标识符和数据源。希望能对您有所帮助！如果还有其他问题，请随时提问。

eltable拖拽排序

实现eltable的拖拽排序可以通过以下步骤：

1. 在el-table组件中添加vuedraggable插件，该插件可以实现拖拽排序的功能。

2. 在el-table组件中设置draggable属性为true，这样就可以使表格的行可以被拖拽。

3. 在el-table-column组件中设置sortable属性为false，这样就可以禁止表格的列被排序。

4. 在el-table组件中添加@change事件，该事件会在拖拽排序完成后触发，可以通过该事件获取拖拽排序后的数据。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :row-key="row => row.id" :draggable="true" @change="handleChange">
    <el-table-column prop="name" label="姓名" :sortable="false"></el-table-column>
    <el-table-column prop="age" label="年龄" :sortable="false"></el-table-column>
    <el-table-column prop="address" label="地址" :sortable="false"></el-table-column>
  </el-table>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18, address: '北京' },
        { id: 2, name: '李四', age: 22, address: '上海' },
        { id: 3, name: '王五', age: 28, address: '广州' },
        { id: 4, name: '赵六', age: 35, address: '深圳' }
      ]
    }
  },
  components: {
    draggable
  },
  methods: {
    handleChange() {
      console.log(this.tableData)
    }
  }
}
</script>

在这个示例中，我们引入了vuedraggable插件，并在el-table组件中设置了draggable属性为true。在el-table-column组件中设置了sortable属性为false，以禁止列的排序。最后在el-table组件中添加了@change事件，用于获取拖拽排序后的数据。