vue2 element-ui表格操作列调整行顺序

templete

<el-table :data="productNameList" border style="width: 100%">
    <el-table-column prop="name" label="Product" align="center" />
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <div style="display: flex; align-items: center; justify-content:space-around;">
                 <i style="font-weight: 600; font-size: 18px;color:skyblue;cursor:pointer;"
                        class="el-icon-top" @click="outWorkTableMove(scope, 'up')"></i>
                  <i style="font-weight: 600; font-size: 18px;color:kyblue;cursor:pointer;"                 
                        class="el-icon-bottom" @click="outWorkTableMove(scope, 'down')"</i>
                            </div>
         </template>
     </el-table-column>
</el-table>

script

 outWorkTableMove(scope, move) {
            let arr = [...this.productNameList];
            if (scope.$index === 0 && move === 'up') {
                this.$message({
                    message: '已经是第一条数据了',
                    type: 'warning'
                })
            } else if (scope.$index == arr.length - 1 && move === 'down') {
                this.$message({
                    message: '已经是最后一条数据了',
                    type: 'warning'
                })
            } else {
                if (move === 'up') {
                    let moveElement = arr.splice(scope.$index, 1);  /**要被操作的元素 */
                    arr.splice(scope.$index - 1, 0, moveElement[0]);
                } else if (move == 'down') {
                    let moveElement = arr.splice(scope.$index, 1);  /**要被操作的元素 */
                    arr.splice(scope.$index + 1, 0, moveElement[0]);
                }
                this.productNameList = arr;
            }
        }

效果