elementUI表格的上移、下移、删除（数组的上移、下移、删除）

想要的样子

大家不要在意内容名称是否能对上的了，就是个例子，使用的话，model还需要改一下哈

<el-form-item label="测评量表：">
          <el-button type="primary" icon="el-icon-plus" size="mini">添加量表</el-button>
          <el-table :data="tableData" border style="width: 80%" size="small">
            <el-table-column align="center" header-align="center" type="index" label="序号" width="60"> </el-table-column>
            <el-table-column align="center" header-align="center" prop="name" label="名称" width="200"> </el-table-column>
            <el-table-column align="center" header-align="center" prop="name" label="题量"></el-table-column>
            <el-table-column align="center" header-align="center" prop="address" label="预计用时"> </el-table-column>
            <el-table-column align="center" header-align="center" label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'up')" type="text" size="small"> 上移 </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'down')" type="text" size="small"> 下移 </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'del')" type="text" size="small" class="dangerBtn"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

js代码

export default {
     
  data () {
     
    return {
     
      tableData: [{
     
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
     
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
     
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
     
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1520 弄'
      }]
    }
  },
  methods: {
     
    deleteRow (index, e, type) {
     
      if (type === 'up') {
     
        if (index === 0) {
     
          return
        }
        // 在上一项插入该项
        this.tableData.splice(index - 1, 0, (this.tableData[index]))
        // 删除后一项
        this.tableData.splice(index + 1, 1)
      } else if (type === 'down') {
     
        if (index === (this.tableData.length - 1)) {
     
          return
        }
        // 在下一项插入该项
        this.tableData.splice(index + 2, 0, (this.tableData[index]))
        // 删除前一项
        this.tableData.splice(index, 1)
      } else if (type === 'del') {
     
        this.tableData.splice(index, 1)
      }
    }
  }
}

比心♥️❤️❤️