热门标签
热门文章
- 1Python大文件解析的效率问题_python unpack效率
- 2Python实现按键精灵功能_python 按键精灵
- 3Android Studio导入工程项目一直处于gradle....而且一直卡在这个页面_import gradle一直在进行
- 4简单几步开启Mac访问NTFS格式读写_mac ntfs读写
- 5centos远程mc服务器,Centos7 下最最最简单的部署 MC 服务器超轻松学废
- 6【学习笔记】计算机网络-Ping命令(一)_ping结果1000发送900接收100errors
- 7pytorch：使用CNN识别数字（分类）_torch.unsqueeze(test_data.test_data, dim=1).type(t
- 8设计模式之工厂模式_1、电视机工厂:使用工厂方法模式实现电视机工厂,可以生产海尔电视,海信电视-2
- 9Linux cron定时介绍_/etc/cron.hourly
- 10Pytorch实现Bert模型_pytorch bert
当前位置: article > 正文
element 表格实现置顶/上移/下移操作（基于vue）_vue表格某一行置顶
作者：凡人多烦事01 | 2024-03-12 11:53:42
赞
踩
vue表格某一行置顶
需求：
表格支持上移，下移，置顶，当第一行的时候，置顶/上移按钮不可点击
最后一行下移按钮不可点击，点击提交再一并请求数据。上图效果
- 实现步骤1：
<el-table-column prop="name" min-width="200" fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="getTopMove(scope.row,scope.$index)" :disabled="scope.$index==0">
置顶
</el-button>
<el-button type="text" size="small" @click="getUpMove(scope.row,scope.$index)" :disabled="scope.$index==0">
上移
</el-button>
<el-button type="text" size="small" @click="getDownMove(scope.row,scope.$index)"
:disabled="dataList.length-1==scope.$index">下移
</el-button>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 实现步骤2：
methods: { //置顶 getTopMove(row, index) { this.dataList.splice(index, 1) this.dataList.unshift(row) }, //上移 getUpMove(row, index) { let arr = this.dataList; arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); }, //下移 getDownMove(row, index) { let arr = this.dataList; arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }, }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
到这就结束了，保存的时候直接拿到dataList去请求接口完事。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/223977
推荐阅读
- 相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
