vue使用elementui实现表格中上下移动功能

html代码

<el-table  :data="prodata">

<el-table-column align="center" label="操作">

  <template slot-scope="scope">

    <el-button  @click="upLayer(scope.$index,scope.row)">上移</el-button>

    <el-button  @click="downLayer(scope.$index,scope.row)" >下移 </el-button>

  </template>

</el-table-column>

</el-table>


js代码

upLayer(index, row) {

    var that = this;

    if (index == 0) {

      that.$message({

        message: "处于顶端,不能继续上移",

        type: "warning"

      });

    } else {

      let upDate = that.prodata[index - 1];

      that.prodata.splice(index - 1, 1);

      that.prodata.splice(index, 0, upDate);

    }

  },

  downLayer(index, row) {

    var that = this;

    if (index + 1 === that.prodata.length) {

      that.$message({

        message: "处于末端端,不能继续下移",

        type: "warning"

      });

    } else {

      let downDate = that.prodata[index + 1];

      that.prodata.splice(index + 1, 1);

      that.prodata.splice(index, 0, downDate);

    }

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容