vue实现列表排序的效果

前言：

        实现element的列表动态排序效果。

效果图：

实现步骤：

一级页面中直接展示：

1、页面列表：

    <el-table
          v-if="uploadTable"
          ref="productOrderTable"
          :data="productOrderData"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="顺序" align="center" min-width="100">
            <template slot-scope="{ row }">
              <span>{{ row.productOrder }}</span>
            </template>
          </el-table-column>
        </el-table>

2、js方法：

// 商品顺序
    selectionChange() {
      const selArr = this.$refs.productOrderTable.selection
      this.productOrderData.forEach(item => {
        item.productOrder = null
      })
      let newArr = []
      selArr.forEach((item,i)=>{
        newArr.push({
          id:item.id,
          index:i+1
        })
      })

      this.productOrderData.forEach(one=>{
        newArr.forEach(two=>{
          if(one.id === two.id){
            one.productOrder = two.index
          }
        })
      })
    },

如果该列表在弹框中：

页面方法：

<el-dialog
  title="商品顺序"
  :visible.sync="productOrderVisible"
  width="80%"
  append-to-body>

        <el-table
          v-if="uploadTable"
          ref="productOrderTable"
          :data="productOrderData"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="顺序" align="center" min-width="100">
            <template slot-scope="{ row }">
              <span>{{ row.productOrder }}</span>
            </template>
          </el-table-column>
        </el-table>

 
    <div slot="footer">
       <el-button @click="productOrderVisible = false">取消</el-button>
       <el-button type="primary" @click="editProductOrderFun">确定</el-button>
    </div>
</el-dialog>

1、弹框打开方法：

this.productOrderData = res.body //列表赋值

      //缓存
      let arr = []
      this.productOrderData.forEach(one=>{
        this.selectionBF.forEach(two=>{
          if(one.id === two.id){
            one.productOrder = two.productOrder
            arr.push(one)
          }
        })
      })
      this.uploadTable = false
      this.$nextTick(()=>{
        this.uploadTable = true
        setTimeout(()=>{
          arr.forEach(two=>{
            this.$refs.productOrderTable.toggleRowSelection(two)
          
          this.productOrderVisible = true //打开弹框
        },100)
      })

 2、弹框点击确定方法：

 // 确认修改商品顺序
    async editProductOrderFun() {
      this.selectionBF = this.productOrderData.filter(v=>v.productOrder)
      this.$message.success('修改商品顺序成功！')
      this.productOrderVisible = false
    }

3、复选框选中事件

​
// 商品顺序
    selectionChange() {
      const selArr = this.$refs.productOrderTable.selection
      this.productOrderData.forEach(item => {
        item.productOrder = null
      })
      let newArr = []
      selArr.forEach((item,i)=>{
        newArr.push({
          id:item.id,
          index:i+1
        })
      })

      this.productOrderData.forEach(one=>{
        newArr.forEach(two=>{
          if(one.id === two.id){
            one.productOrder = two.index
          }
        })
      })
    },

​