需求:

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])
        );
      },

 

 

Logo

前往低代码交流专区

更多推荐