element 表格实现置顶/上移/下移操作（基于vue）

需求：

表格支持上移，下移，置顶，当第一行的时候，置顶/上移按钮不可点击
最后一行下移按钮不可点击，点击提交再一并请求数据。上图效果

• 实现步骤1：

 <el-table-column prop="name" min-width="200" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getTopMove(scope.row,scope.$index)" :disabled="scope.$index==0">
              置顶
            </el-button>
            <el-button type="text" size="small" @click="getUpMove(scope.row,scope.$index)" :disabled="scope.$index==0">
              上移
            </el-button>
            <el-button type="text" size="small" @click="getDownMove(scope.row,scope.$index)"
                       :disabled="dataList.length-1==scope.$index">下移
            </el-button>
          </template>
        </el-table-column>

• 实现步骤2：

methods: {
//置顶
  getTopMove(row, index) {
      this.dataList.splice(index, 1)
      this.dataList.unshift(row)
    },
    //上移
    getUpMove(row, index) {
      let arr = this.dataList;
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },
    //下移
    getDownMove(row, index) {
      let arr = this.dataList;
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },
 }

到这就结束了，保存的时候直接拿到dataList去请求接口完事。