vue 基于 iview 的 table 表格的拖拽换顺序实现。
需求:iview 的表单实现拖拽换位置。然后自动将整个数组传给后台。iview 文档说明;<Table:columns="dataCardcolumns":data="caredData":draggable="true"@on-drag-dr...
·
需求:
iview 的表单实现拖拽换位置。然后自动将整个数组传给后台。
iview 文档说明;
<Table
:columns="dataCardcolumns"
:data="caredData"
:draggable="true"
@on-drag-drop="onDragDrop"
>
<template slot-scope="{ row, index }" slot="sort">
<span>{{ index + 1 }}</span>
</template>
<template slot-scope="{ row, index }" slot="materielTypeNo">
<Input
type="text"
v-model="row.materielTypeNo"
required
@on-change="changematerielTypeNo(row, index)"
/>
</template>
<template slot-scope="{ row, index }" slot="materielTypeName">
<Input
type="text"
v-model="row.materielTypeName"
required
@on-change="changeInput(row, index)"
/>
</template>
<template slot-scope="{ row, index }" slot="action">
<Poptip confirm transfer title="确定删除?" @on-ok="handleRemove(row, index)">
<Button size="small" type="error" ghost class="ivu-mr">删除</Button>
</Poptip>
</template>
</Table>
<transition name="ivu-anim-fade">
<div v-if="tipsFlag" class="ivu-mt">
<Alert type="warning" show-icon>修改排序后必须确认保存</Alert>
</div>
</transition>
// 拖拽换位置
onDragDrop(first, end) {
this.tipsFlag = true
this.caredData.splice(
end,
1,
...this.caredData.splice(first, 1, this.caredData[end])
);
},
更多推荐
已为社区贡献3条内容
所有评论(0)