elementUI Table数据上移下移操作

基于VUE+elementUI的Table数据上移下移

一.使用方法
利用scope获取表格每行的数据和索引
scope.$index 该行数据的索引（index相当于table.data[index]）
scope.row为该行数据的内容

二、具体代码实现
1.渲染table

  <el-table
      ref="maplayertable"
      :data="tableData.data"
      tooltip-effect="dark"
      v-loading="loading">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="图层名称"
        width="255">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="创建时间"
        width="255">
        <template slot-scope="scope">
          {{formatTime(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="255">
        //使用scope插槽，获取行数据
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="deleEqDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="upLayer(scope.$index,scope.row)">上移</el-button>
          <el-button type="text" size="small" @click.native.prevent="downLayer(scope.$index,scope.row)">下移</el-button>
        </template>
      </el-table-column>
    </el-table>

2.获取本行id和上一行的id，访问后台接口，调换顺序，后刷新表格

   //上移图层数据
      upLayer: function (index, row) {
        if (index == 0) {
          this.$message({
            message: '处于顶端，不能继续上移',
            type: 'warning'
          });
        } else {
          var that = this;
          let param = {};
          param.ename1 = row.ename;//该行数据id
          param.ename2 = that.tableData.data[index - 1].ename;  //上一行数据的id
           //访问后台接口[传入两个调换的id值（此处ename1,2）,有后台调换顺序，刷新数据]
           this.$http.get('/', {params: param}).then(function (res) {
            this.$message({
              message: '上调成功',
              type: 'success'
            });
            this.queryLayer();
          }, function () {
            console.log('请求失败处理');
          });
        }
      },