vue+elementui 数据表格上下移动功能

最新推荐文章于 2023-06-06 10:50:53 发布

小小的梦想！

最新推荐文章于 2023-06-06 10:50:53 发布

阅读量707

点赞数

分类专栏： Vue ElementUI 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42402845/article/details/115671779

版权

本文介绍如何在Vue.js项目中，结合ElementUI组件库，利用同一个接口实现数据表格中行的上下移动功能。当后端接口设计仅提供一个接口进行移动操作时，可以采用以下策略来处理。

摘要由CSDN通过智能技术生成

如果后端只提供了一个接口，上下移动只用一个接口时候，如下

<el-table :data="list">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="id" label="管理" width="80">
        <template slot-scope="scope">
         <el-link
              :underline="false"
              type="info"
              @click="onMoveUp(scope.$index, scope.row)"
              :disabled="scope.$index === 0"
              ><i style="font-weight: bold" class="el-icon-top"></i></el-link>
            <el-link
              :underline="false"
              type="info"
              @click="onMoveDown(scope.$index, scope.row)"
              :disabled="scope.$index === list.length - 1"