vxe-table+sortable实现表格列左右拖拽

要使用vxe-table和sortable实现表格列的左右拖拽，可以按照以下步骤进行： 1. **安装必要的库**： 首先，确保你已经安装了vxe-table和sortablejs。 ```bash npm install vxe-table sortablejs ``` 2. **引入必要的模块**： 在你的Vue组件中，引入vxe-table和sortablejs。 ```javascript import Vue from 'vue' import 'vxe-table/lib/style.css' import VXETable from 'vxe-table' import Sortable from 'sortablejs' Vue.use(VXETable) ``` 3. **创建Vue组件**： 创建一个Vue组件，并在其中定义vxe-table。 ```vue <template> <vxe-table :data="tableData" :columns="tableColumns" ref="xTable"> </vxe-table> </template> <script> export default { data() { return { tableData: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'vxe-table 从入门到放弃' }, { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }, { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'vxe-table 从入门到放弃' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'vxe-table 从入门到放弃' }, { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'vxe-table 从入门到放弃' } ], tableColumns: [ { field: 'id', title: 'ID', width: 100 }, { field: 'name', title: 'Name', width: 200 }, { field: 'role', title: 'Role', width: 200 }, { field: 'sex', title: 'Sex', width: 100 }, { field: 'age', title: 'Age', width: 100 }, { field: 'address', title: 'Address', width: 300 } ] } }, mounted() { this.$nextTick(() => { this.setupSortable() }) }, methods: { setupSortable() { const xTable = this.$refs.xTable const tbody = xTable.$el.querySelector('.vxe-table--body tbody') Sortable.create(tbody, { onEnd: evt => { const { oldIndex, newIndex } = evt const currData = [...this.tableData] const [removed] = currData.splice(oldIndex, 1) currData.splice(newIndex, 0, removed) this.tableData = currData } }) } } } </script> ``` 4. **解释代码**： - **数据定义**：定义了一个表格数据和列配置。 - **mounted生命周期钩子**：在组件挂载后，调用`setupSortable`方法。 - **setupSortable方法**：使用sortablejs创建一个可拖拽的表格体，并在拖拽结束后更新表格数据。 通过以上步骤，你就可以实现vxe-table表格列的左右拖拽功能。