Vue 和
Element UI 都提供了一些
内置的指令和组件，可以方便地实现列表拖拽功能。下面是一个简单的示例：
1. 安装
Element UI
在 Vue 项目
中使用
Element UI，需要先安装
Element UI：
```
npm install
element-ui -S
```
2. 引入
Element UI
在 Vue 项目的入口文件
中引入
Element UI：
```javascript
import Vue from 'vue'
import
ElementUI from '
element-ui'
import '
element-ui/lib/theme-chalk/index.
css'
Vue.use(
ElementUI)
```
3. 创建一个可拖拽的表格
使用
Element UI 的 `
el-
table` 组件创建一个表格，并添加 `
el-
table-
column` 组件来定义表格的列。在每
一列的 `header`
中添加 `draggable` 属性，并绑定一个事件处理函数。
```html
<template>
<div class="drag-
table">
<
el-
table :data="
tableData" style="width: 100%" @sort-change="handleSortChange">
<
el-
table-
column type="index" lab
el="序号" width="50"></
el-
table-
column>
<
el-
table-
column lab
el="名称" prop="name" header-draggable @header-dragend="handleHeaderDragEnd"></
el-
table-
column>
<
el-
table-
column lab
el="年龄" prop="age"></
el-
table-
column>
<
el-
table-
column lab
el="地址" prop="address"></
el-
table-
column>
</
el-
table>
</div>
</template>
```
在 `handleHeaderDragEnd` 方法
中，获取拖拽结束后的表头位置信息，并根据位置信息重新排列表格列的顺序。
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市海淀区' },
{ name: '李四', age: 20, address: '上海市浦东新区' },
{ name: '王五', age: 22, address: '广州市天河区' },
{ name: '赵六', age: 24, address: '深圳市南山区' }
]
}
},
methods: {
handleHeaderDragEnd(newWidth, oldWidth,
column, event) {
const
tableEl = event.target.closest('.
el-
table')
const headerC
ells =
tableEl.queryS
electorAll('.
el-
table__header-wrapper th')
const new
Columns = []
Array.from(headerC
ells).forEach((c
ell, index) => {
const prop = c
ell.getAttribute('data-prop')
const
column = this.$refs.
table.store.states._
columns.find(c => c.property === prop)
if (
column) {
new
Columns.push(
column)
}
})
this.$refs.
table.store.commit('set
Columns', new
Columns)
},
handleSortChange() {
// 排序后需要重新计算列的位置
this.$nextTick(() => {
const headerC
ells = this.$
el.queryS
electorAll('.
el-
table__header-wrapper th')
Array.from(headerC
ells).forEach((c
ell, index) => {
c
ell.setAttribute('data-index', index)
})
})
}
}
}
```
4. 添加样式
为了让表格列能够拖拽，还需要添加一些样式：
```
css
.drag-
table .
el-
table__header-wrapper th {
cursor: move;
}
.drag-
table .
el-
table__header-wrapper th.dragging {
opacity: 0.5;
}
```
至此，我们已经完成了一个简单的可拖拽的表格。当用户拖拽表头时，表格列的位置会随之改变。需要注意的是，这个示例只实现了表头拖拽的功能，如果需要实现行拖拽的功能，可以参考 Vue 官方提供的 sor
table.js 插件。
2604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
