vue+element拖动排序功能

项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧!

这功能肯定不会手撸了,直接上插件

使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.

　　教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741

　　教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094

1. 安装npm install vuedraggable -S(可能需要安装Sortable)
2. 引用import draggable from 'vuedraggable'
3. 注册组件components: { draggable },
4. 通过draggable标签来使用
5. 调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.

template代码:

<draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}">
          <div class="drag-item" v-for="(item,i) in codeList" :key="i">
            <el-row>
              <el-col class="line" :span="6">&nbsp;{{item.field_title}}</el-col>
              <el-col class="line" :span="8">
                <el-switch
                  v-model="item.is_show"
                  active-color="#13ce66"
                  @change="lockChange(item)"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-col>
              <el-col :span="8">
                <el-button type="text" size="mini" @click="showEditCode(item)">编辑</el-button>
                <el-button
                  v-if="item.is_system != 1"
                  type="text"
                  size="mini"
                  @click="deleCode(item)"
                >删除</el-button>
              </el-col>
            </el-row>
          </div>
        </draggable>

methods代码:

async datadragEnd(evt) {
      evt.preventDefault();
      // console.log('拖动前的索引 :' + evt.oldIndex)
      // console.log('拖动后的索引 :' + evt.newIndex)
      // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
      let arr = this.codeList;
      let newArr = await arr.map((item, i) => {
        return {
          sort_order: i,
          field_code: item.field_code
        };
      });
      const res = await this.$axios.post(`customer/save_order`, {
        list: newArr
      });
      // console.log(res)
      const { error, message } = res.data;
      if (error == 0) {
        this.$message.success(message);
      }
    },