elementUI中table行上下移动

最新推荐文章于 2025-03-28 13:35:03 发布

weixin_45290022

最新推荐文章于 2025-03-28 13:35:03 发布

阅读量4.2k

点赞数 7

分类专栏： el-table中数据行上下移动

本文链接：https://blog.youkuaiyun.com/weixin_45290022/article/details/106553415

版权

本文介绍在Vue项目中使用ElementUI的el-table组件如何手动控制行的上下移动来改变数据排序。通过示例代码展示关键实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中 el-table中如何控制行的上下移动

在vue项目中遇到一个问题： el-table中的数据如何手动控制行的上下移动进行数据排序。现在问题已经解决了，分享一下。直接上代码：（只粘贴主要的代码）

html中的代码：

<el-table
      :data="tableData"
      :height="tableHeight"
      :header-cell-style="tableHeaderColor"
      stripe
      border>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <i class="el-icon-bottom icon_class"@click="moveDown(scope.$index,scope.row)"/>
          <i class="el-icon-top icon_class" @click="moveUp(scope.$index,scope.row)"/>
        </template>
      </el-table-column>
    </el-table>

js中的代码：