iview实现表格上下移动
时间: 2023-09-03 13:13:14 浏览: 42
运用jquery技术实现表格元素的上下移动
5星 · 资源好评率100%
你可以通过使用iView的Table组件中的可拖拽行来实现表格的上下移动。具体步骤如下:
1. 在Table组件中设置`row-key`属性为每行数据的唯一标识符,例如`<Table :data="tableData" :row-key="row => row.id">`
2. 使用iView提供的`<Draggable>`组件包裹每行数据,例如:
```
<Table :data="tableData" :row-key="row => row.id">
<template slot-scope="{row, index}">
<Draggable :element="'tr'" :list="tableData" :item="row" :index="index">
<tr>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<!-- 其他列数据 -->
</tr>
</Draggable>
</template>
</Table>
```
3. 在`<Draggable>`组件上监听`on-end`事件,并在事件处理函数中更新表格的数据源`tableData`,例如:
```
<Table :data="tableData" :row-key="row => row.id">
<template slot-scope="{row, index}">
<Draggable :element="'tr'" :list="tableData" :item="row" :index="index" @on-end="handleDragEnd">
<tr>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<!-- 其他列数据 -->
</tr>
</Draggable>
</template>
</Table>
methods: {
handleDragEnd({list}) {
this.tableData = list;
}
}
```
这样就可以通过拖拽行来实现表格的上下移动了。
阅读全文