Vue Element Sortablejs实现表格列的拖拽案例详解

题目要求我详细讲解“Vue Element Sortablejs实现表格列的拖拽案例详解”。那么，我会给出完整的攻略以及两个示例，以下是具体步骤，建议您可以配合阅读文章中的代码来更好的理解。

一、前置知识

在正式开始之前，需要基本了解以下几个知识点：

1. Vue框架基础；
2. Vue组件的使用；
3. Element UI库的使用；
4. Sortable.js插件介绍与使用。

二、实现表格列的拖拽

1. 创建Vue组件

首先，在Vue项目中创建一个组件，命名为“TableDrag”，代码如下：

<template>
  <div>
    <el-table :data="tableData" ref="dragTable" v-sortable>
      <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  name: 'TableDrag',
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tableData: []
    };
  },
  mounted() {
    this.tableData = this.data;
    this.initSortable();
  },
  methods: {
    initSortable() {
      const that=this
      this.sortable = Sortable.create(this.$refs.dragTable.$el.querySelector('tbody'), {
        animation: 150,
        filter: '.noclick',
        dataIdAttr: 'order',
        handle: '.drag',
        onUpdate(evt) {
          const {oldIndex, newIndex} = evt;
          that.tableData.splice(newIndex, 0, that.tableData.splice(oldIndex, 1)[0])
          that.$emit('drag-end', that.tableData);
        }
      });
    }
  }
};
</script>

这个组件包含了一个表格，它使用了Element UI的el-table组件渲染数据。同时，我们使用v-sortable指令将表格转化为可拖拽的组件。

2.使用组件

在Vue项目中使用刚才创建的组件，示例代码如下：

<template>
  <div>
    <table-drag :data="tableData" :columns="tableColumns" @drag-end="dragEnd"></table-drag>
  </div>
</template>

<script>
import TableDrag from './TableDrag.vue'
export default {
  name: 'App',
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: '姓名', prop: 'name'},
        { label: '年龄', prop: 'age'},
        { label: '性别', prop: 'gender'},
        { label: '家庭地址', prop: 'address'},
        { label: '联系电话', prop: 'phone'},
      ]
    }
  },
  mounted() {
    this.mockData();
  },
  methods: {
    mockData() {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push({
          name: '张三' + i,
          age: Math.floor(Math.random() * 20 + 20),
          gender: i % 2 === 0 ? '男' : '女',
          address: '湖南省长沙市长沙县XXX大道',
          phone: '182' + Math.floor(Math.random() * 100000000).toString()
        })
      }
      this.tableData = data;
    },
    dragEnd(data) {
      this.tableData = data;
    }
  },
  components: {
    TableDrag
  }
};
</script>

这个示例里，我们创建了一个表格，表格数据由mockData方法获取，然后将数据和列配置传递给TableDrag组件。同时，@drag-end事件处理方法dragEnd用于更新表格数据。

三、上述代码的解释

代码中最重要的部分是Sortable.create方法，它是Sortable.js插件的核心代码，以下是一些参数的详细解释：

1.animation 动画时长，单位毫秒。

2.filter 拖拽过程中要过滤掉某些元素。

3.dataIdAttr 是该元素要保存的数据，相当于data属性，一般是自定义属性，默认为'Data-id'。

4.handle 只有拖拽到指定区域才能拖拽，并且只能拖拽指定的元素。

5.onUpdate 在拖拽完成后触发，用于更新数据或提交数据。

四、下面是两个示例的详细说明，它们分别是：

1.禁止某些列拖拽

在一张表格中，有时候我们不希望某些列进行拖拽，比如表格的首列是固定不动的某个标识，不需要移动它，此时我们可以通过Sortable.js提供的filter参数来实现。

示例代码：

 initSortable() {
      const that=this
      this.sortable = Sortable.create(this.$refs.dragTable.$el.querySelector('tbody'), {
        animation: 150,
        filter: '.noclick',
        dataIdAttr: 'order',
        handle: '.drag',
        onUpdate(evt) {
          const {oldIndex, newIndex} = evt;
          that.tableData.splice(newIndex, 0, that.tableData.splice(oldIndex, 1)[0])
          that.$emit('drag-end', that.tableData);
        }
      });
    }

可以看到，这里给Sortable.create方法传递了一个filter参数，这个参数的值为.noclick，表示在拖拽过程中，所有带有noclick类名的元素都不会被拖拽。

2.支持列宽度拖拽

在表格中，除了支持表头列的拖拽，也应该支持表头的列宽度拖拽，而实现列宽度拖拽可以使用Element UI库提供的resizable属性。

示例代码：

<el-table-column resizable ...></el-table-column>

在这段代码中，只需要给el-table-column添加一个resizable属性即可支持列宽度拖拽。同时，你还可以设置el-table-column的min-width与max-width属性来限制可拖拽的宽度范围。

这就是关于“Vue Element Sortablejs实现表格列的拖拽案例详解”的攻略，希望能对您有所帮助。