antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记

1.背景

选中表格中某一行，高亮显示，table表格数据变化后（删除某几条数据，不包括选中的删除）， this.$refs.multipleTable.setCurrentRow(row),选中之前选中的行，可发现总是选中下一条的数据（选中的是2，删除3,4，5后再用this.$refs.multipleTable.setCurrentRow(row)选中2，结果选择的是6），控制台打印的数据是2的数据；

2.尝试

nextTick().setTimeout()都不能解决。明明this.$refs.multipleTable.setCurrentRow(row)传的数据是正确的，可页面就是选择另一行

3.源码

 setRowspanTrHoverState(cell, flag = 'enter') {const allRow = this.$el.querySelectorAll('tbody > tr.el-table__row');let rowspan = cell.getAttribute('rowspan');// 鼠标不再合并的单元格上直接中止if (rowspan === null) return;// 当前单元格所在行的序号let start = [].slice.call(allRow).indexOf(cell.parentNode);rowspan = +rowspan;// rowspan == 0表示从当前行一直都末尾都合并// rowspan == 1无意义，等同于未合并if (rowspan > 1 || rowspan === 0) {const end = rowspan > 0 ? rowspan + start - 1 : allRow.length - start;while (start <= end) {flag === 'enter'? addClass(allRow[start], 'hover-row'): removeClass(allRow[start], 'hover-row');start++;}}},

4.猥琐的结解决方案

 //监听tableData
watch: {tableData(val) {//this.curRow之前选中的行let curIndex = val.findIndex(item => item.id=== this.curRow.id)//如果之前选中的行被删除，默认选中第一行if (curIndex === -1) {this.$nextTick(() => {this.$refs.multipleTable.setCurrentRow(val[0])this.curRow = val[0]})} else {//如果之前选中的行没有被删除，则选中之前的行// 解决处理渲染错误的问题this.$nextTick(() => {let rows = this.$refs.multipleTable.$el.querySelectorAll('tbody > tr.el-table__row')if (rows.length) {rows = Array.from(rows)rows.forEach(item => item.classList.remove('current-row'))rows[curIndex].classList.add('current-row')}})}}},

antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记相关推荐

alter table 加多个字段_Vue 组件设计 - table不需要封装
table 为什么要封装?封装 table 组件的目的是什么? 比如诸如 ant design 之类的 UI 组件库,你会发现虚拟滚动表格甚至不使用 table tbody 等标签实现的,那这个表单组 ...
vue获取table一列数据_vue表格含有一列多选框，如何获取被选中的行的数据？
1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox.但是无法获取this.multipleSelection的值.相关代码如下: 男女个人团 ...
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...
React路由---react-router-dom、获取路由参数、ant design ui组件、fetch发送请求（默认不能跨域）、Switch...
1.下载 yarn add react-router-dom --save 2.导入 import React from "react"; import { BrowserRout ...
input change获取改变之前的值和改变之后的值_input[type=#x27;number#x27;],ios安卓采坑记
近日,在为公司维护移动端H5代码的过程中,因为平台实现的差异,中间踩了不少坑.借此机会记录一下,也希望大家能有个了解,少走弯路.这一切的一切,都要从一个简单的需求开始说起. 某日,产品.测试反馈,对于 ...
获取bootgrid选中行数据_Easyui 取得选中行数据_EasyUI 教程
示例本实例演示如何取得选中行数据. 数据网格(datagrid)组件包含两种方法来检索选中行数据: getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. g ...
jQuery实现table表格中行数据上下拖拽功能
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({cursor: "move",axis: "y&quo ...
datagrid页面获取表单一条数据的例子
[问题背景] 最近在做ITOO考评的时候想从页面获取表单选中的数据: [代码] 在数据网格(datagrid)组件包含两种方法来检索选中行数据: getSelected:取得第一个选中行数据,如果 ...
python利用表格中的某一个列_python取excel表格第一列数据?python操作excel，使用xlrd模块，获取某一列数据的语句为...
用Python修改excel中一列数据可以使用pandas库,先读取excel文件,然后使用pandas库来修改一列,然后写入文件即可. 怎样用python,读取excel中的一列数据 sheet. ...

antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记

1.背景

2.尝试

3.源码

4.猥琐的结解决方案

antd 获取table选中行数据_element-ui 组件el-table默认选中行setCurrentRow采坑记相关推荐

最新文章

热门文章