实现vue饿了么表格排序功能

实现如图所示排序

先写table如下所示

<el-table
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"//表头样式
              :data="Listdata"
              border
              @cell-dblclick="bccelldblclick"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
              >
              //使用插槽获取本行数据
                <template slot-scope="{ row }">
                  <div>
                    <i
                      @click="upobject(row)"
                      class="el-icon-arrow-up "
                    ></i>
                    <div>
                    //用于返回当前数组的index
                      {{Listdata.findIndex((item) =>item.RenRenYuanId == row.RenRenYuanId)+1}}
                    </div>
                    <i
                      @click="downobject(row)"
                      class="el-icon-arrow-down"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="xingMing"
                label="姓名"
                width="180"
                align="center"
              ></el-table-column>
            </el-table>

用插槽获取本行数据，再对本行数据进行上移或下移操作，因本数据无index使用了findIndex获取下标

具体看上移函数

    upobject(e) {
      let index = this.Listdata.findIndex((item) =>item.RenRenYuanId == e.RenRenYuanId)
      if (index == 0) {
        return this.$message.error("已经是最顶层！");
      }
      this.Listdata.splice(
        index,
        1
      );
      this.Listdata.splice(
        index - 1,
        0,
        e
      );
      console.log("上", index);
    },

先获取当前下标，当当前下标为0时提示已经是最顶层，然后使用splice删除当前行的数据，再把该数据加入当上一条之前，便可完成上移操作。下移的思路一样不过还要获取数组最后一个的index

let lastindex =this.Listdata.length;
      if (index == lastindex - 1) {
        return this.$message.error("已经是最低层！");
      }