el-table拖拽
时间: 2023-08-19 11:08:29 浏览: 233
对于 el-table 组件的拖拽功能,你可以使用第三方库 vue-draggable-resizable 来实现。下面是一个简单的示例代码:
首先,安装 vue-draggable-resizable:
```
npm install vue-draggable-resizable
```
然后,在你的组件中引入 vue-draggable-resizable:
```javascript
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
components: {
VueDraggableResizable
},
data() {
return {
tableData: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Tom', age: 35 }
]
}
}
}
```
接下来,使用 vue-draggable-resizable 包裹 el-table 组件,并设置 `draggable` 属性为 `true`:
```html
<template>
<vue-draggable-resizable :draggable="true">
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</vue-draggable-resizable>
</template>
```
这样就可以实现 el-table 的拖拽功能了。你可以根据自己的需求,进一步调整样式和功能。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)