当前位置: 首页 > news >正文

element 表格拖拽保存插件

这是以前看着一篇文章

1.下载包
npm install sortablejs --save
2.在页面中引入,或者全局引入
import Sortable from ‘sortablejs’
3.在template中

<div id="second"><el-tableclass="threeTable":style="{'height':tableData.length === 0 ? '100px' : 'auto'}":data="tableData"stripestyle="width: 100%;"highlight-current-row:header-cell-style="headerCellStyle"row-key="proCode"><el-table-column type="index" label="序号" width="58"></el-table-column><el-table-column prop="proCode" label="供方编码"></el-table-column><el-table-column prop="proDesc" label="供方名称"></el-table-column><el-table-column label="操作" width="80"><template slot-scope="scope"><el-tooltip class="tree-item" effect="dark" content="删除" placement="top"><el-button type="text" class="" @click="deleteTable(scope.row, scope.$index)"><icon-svg icon-class="iconshanchu" /></el-button></el-tooltip></template></el-table-column></el-table>
</div>

在script中

<script>mounted () {this.rowDrop()},methods: {// 行拖拽rowDrop () {const tbody = document.querySelector('#second .el-table__body-wrapper tbody')const _this = thisSortable.create(tbody, {onEnd ({newIndex, oldIndex}) {const currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow) // _this.tableData换成自己的表格即可}})},}
</script>
http://www.lryc.cn/news/172493.html

相关文章:

  • 通过内网穿透,在Windows 10系统下搭建个人《我的世界》服务器公网联机
  • C++11异步任务轮子实现(header-only)
  • 2023华为杯研究生数学建模竞赛选题建议+初步分析
  • 多线程并发或线程安全问题如何解决
  • 深度学习——线性神经网络一
  • 利用大模型知识图谱技术,告别繁重文案,实现非结构化数据高效管理
  • Java抽象类和普通类区别、 数组跟List的区别
  • Leetcode.2522 将字符串分割成值不超过 K 的子字符串
  • 成绩分析(蓝桥杯)
  • 【多思路附源码持续更新】2023年华为杯(中国研究生数学建模)竞赛C题
  • 基于STM32设计的校园一卡通(设计配套的手机APP)
  • 有了Spring为什么还需要SpringBoot呢
  • 【记录】Python 之于 C/C++ 区别
  • 【Vue-Element-Admin】dialog关闭回调事件
  • Ansible自动化:简化你的运维任务
  • webpack配置alias后eslint和ts无法识别
  • 小程序从无到有教学教程-- 01.重置华为云服务器Huawei Cloud EulerOS 2.0版本并且设置安全组
  • js实现短信验证码一键登录
  • vue2的基础知识巩固
  • echart离线地图下载地址
  • elk日志某个时间节点突然搜索不到了
  • dbeaver 导出的sql文件,恢复数据库报错,Unknown command ‘\‘‘.
  • Android.bp常用语法和预定义属性
  • close和fclose
  • 在已知的二维坐标里找到最接近的点
  • spring boot 八、 sharding-jdbc 分库分表 按月分表
  • Java 8 中Stream流的一些用法
  • Elasticsearch 8.10 中引入查询规则 - query rules
  • Windows PostgreSql 创建多个数据库目录
  • Java AOP Framework概述