前端element-ui实现表格调换位置

      <el-table
        border
        v-loading
        :data="columnList"
        ref="columnTable"
        max-height="400px"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column
          label="Columns Name"
          prop="label"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="Operation" align="center">
          <template slot-scope="scope">
            <div class="flex itemsCenter flexCenter">
             //向上按钮
              <i
                class="el-icon-upload2 pointer"
                v-if="scope.$index !== 0"
                @click="upHandle(scope.$index)"
                :style="{
                  'margin-right':
                    scope.$index !== columnList.length - 1 ? '10px' : 0,
                  'font-size': '16px',
                }"
              ></i>
              //向下按钮
              <i
                class="el-icon-download pointer"
                v-if="scope.$index !== columnList.length - 1"
                @click="downHandle(scope.$index)"
                style="font-size: 16px"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>

    upHandle(index) {
      //当前行
      let currData = this.columnList[index];
      // //移除当前行并插入到上一行之前
      this.columnList.splice(index, 1);
      this.columnList.splice(index - 1, 0, currData);
    },
    downHandle(index) {
      //下一行
      let nextData = this.columnList[index + 1];
      // //移除下一行并插入到当前行之前
      this.columnList.splice(index + 1, 1);
      this.columnList.splice(index, 0, nextData);
    },