vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽

这篇文章距离上次修改已过265天，其中的内容可能已经有所变动。

在使用Vue3、Element Plus和SorTable.js进行表格拖拽操作时，如果你想要限制某列或某几列不被拖拽，可以通过SorTable.js的配置选项来实现。

SorTable.js提供了一个disabled属性，可以用来指定哪些列不应该被拖拽。你需要为不想拖拽的列设置disabled属性为true。

以下是一个简单的例子，演示如何在Vue3和Element Plus中使用SorTable.js来限制某列不被拖拽：

<template>
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 这里设置 disabled 属性为 true，表示不允许拖拽 -->
    <el-table-column
      prop="address"
      label="地址"
      width="300"
      :resizable="false">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import 'element-plus/dist/index.css';
import 'sortablejs/modular/css/sortable.css';
import Sortable from 'sortablejs';

const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333
  },
  // ...更多数据
]);

window.onload = function() {
  // 初始化 Sortable 实例
  const el = document.querySelector('.el-table__body-wrapper tbody');
  new Sortable(el, {
    animation: 180,
    delay: 0,
    disabled: ['.el-table__body tr[data-index="1"] .el-table_1_column_1'], // 这里指定不可拖拽的列
    onEnd: (evt) => {
      const oldIndex = evt.oldIndex;
      const newIndex = evt.newIndex;
      // 拖拽后的处理逻辑
    }
  });
};
</script>

在上面的代码中，我们使用了:resizable="false"来禁止列宽度的调整，并在onload函数中初始化了Sortable.js，通过disabled属性指定了不想拖拽的列。这里的选择器.el-table__body tr[data-index="1"] .el-table_1_column_1指的是第二行的第一列（索引从0开始），你可以根据实际情况修改选择器来指定不想拖拽的列。

请注意，这里的选择器需要根据你的实际DOM结构来定制，因为Element Plus生成的类名可能会随着版本变化而变化。你可以使用浏览器的开发者工具查看实际的元素和类名，并相应地调整选择器。

vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽

评论已关闭

推荐阅读