上下移动顺序

上移:moveUp
下移:moveDown

          <el-table ref="multipleTable" :height="operaHeight" :data="listTableData" style=" 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="操作名称" min-width="30%">
              <template slot-scope="scope">
                <span @click="btnActionDataClick(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作类型" min-width="30%"></el-table-column>
            <el-table-column prop="address" label="向上移动">
              <template slot-scope="scope">
                <el-button size="mini" :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)">
                  <i class="el-icon-arrow-up"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="向下移动">
              <template slot-scope="scope">
                <el-button size="mini" :disabled="scope.$index === listTableData.length - 1" @click="moveDown(scope.$index, scope.row)">
                  <i class="el-icon-arrow-down"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>


data(){
      return{
            listTableData:[]
      }
},

methods:{
    /**
     * 操作向上移动
     */
    moveUpmoveUp(index) {
      console.log(this.listTableData);
      // 保存上一条数据
      let updata = this.listTableData[index - 1];
      // 删除上一条的数据
      this.listTableData.splice(index - 1, 1);
      // 将上一条数据插入当前的索引数组
      this.listTableData.splice(index, 0, updata);
    },

    /**
     * 操作向下移动
     */
    moveDown(index) {
      // 保存下一条数据
      let downData = this.listTableData[index + 1];
      // 删除下一条数据
      this.listTableData.splice(index + 1, 1);
      // 将下一条数据插入当前的索引中
      this.listTableData.splice(index, 0, downData);
    },
}
原文地址:https://www.cnblogs.com/yx1102/p/13658775.html