vuedraggable el-table
时间: 2024-05-29 16:07:01 浏览: 8
vuedraggable是一个Vue.js组件,它是基于Sortable.js实现的,用于实现拖拽排序功能。而el-table是Element UI框架提供的一个表格组件。在使用el-table时,可以结合vuedraggable实现对表格内容的拖拽排序操作。
具体来说,在el-table中,可以将表格数据作为vuedraggable的列表数据进行绑定,然后使用vuedraggable提供的事件监听机制,在拖拽完成后对表格数据进行重新排序,从而实现拖拽排序的功能。
需要注意的是,vuedraggable和el-table的版本兼容问题,具体可以参考官方文档。
相关问题
vuedraggable结合el-table实现拖拽
要将vuedraggable与el-table结合使用,需要进行以下步骤:
1. 安装vuedraggable和element-ui:
```bash
npm install vuedraggable element-ui --save
```
2. 在Vue项目中引入vuedraggable和element-ui:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import draggable from 'vuedraggable'
Vue.use(ElementUI)
Vue.component('draggable', draggable)
```
3. 创建一个el-table,将vuedraggable作为el-table-column的插槽:
```html
<el-table :data="tableData">
<el-table-column label="Name">
<template slot-scope="scope">
<draggable :list="scope.row.items" :options="{handle:'.handle'}">
<div v-for="(item, index) in scope.row.items" :key="index">
<span class="handle">drag</span>
{{ item }}
</div>
</draggable>
</template>
</el-table-column>
</el-table>
```
其中,tableData是一个包含多行数据的数组,每行数据都有一个items属性,用于存储拖拽列表中的元素。
4. 为拖拽元素添加样式,使其可拖拽:
```css
.handle {
cursor: move;
}
```
这样就可以在el-table中使用vuedraggable实现拖拽功能了。
el-table虚拟化
```javascript
// 使用element-plus的虚拟表格化组件el-table-v2渲染数据和组件的方法
// 设置columns属性时,其中的宽度字段(width)必须设置值(只能是数字类型)且每一列都要设置
// el-table-v2在生产环境使用可能有风险,建议使用vxe-table
// 安装依赖:npm i -S vuedraggable@next
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)