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