ele 多个表格 tab切换后 多选, 复选出现的问题
本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题
问题如图所示
解决方法
将两个tab 用两个不用的ref, 复选框正常实现
<template><div><p style="margin: 20px 0;"><el-radio-group v-model="radio1" @change="tabchange"><el-radio-button label="tab1">tab1</el-radio-button><el-radio-button label="tab2">tab2</el-radio-button></el-radio-group></p><div v-show="radio1 === 'tab1'"><u-tableref="plTableTab1":data="tableData":height="300"use-virtualshowBodyOverflow="title"showHeaderOverflow="title"border><u-table-column type="index" width="100" fixed/><u-table-columnv-for="item in columns":key="item.id":resizable="item.resizable":show-overflow-tooltip="item.showOverflow":prop="item.prop":label="item.label":fixed="item.fixed":width="item.width"/></u-table></div><div v-show="radio1 === 'tab2'"><u-tableref="plTableTab2":data="tableData":height="300"use-virtualshowBodyOverflow="title"showHeaderOverflow="title"border><u-table-column type="selection" width="60"></u-table-column><u-table-columnv-for="item in columns":key="item.id":resizable="item.resizable":show-overflow-tooltip="item.showOverflow":prop="item.prop":label="item.label":fixed="item.fixed":width="item.width"/></u-table></div></div></template><script>export default {data() {return {radio1: 'tab1',columns: Array.from({ length: 10 }, (_, idx) => ({prop: 'address', id: idx, label: '地址地址地址地址地址地址地址地址地址地址地址' + idx, width: 200})),tableData: Array.from({ length: 500 }, (_, idx) => ({id: idx + 1,date: '2016-05-03',name: 1,ab: '欢迎使用u-table',address: '北京市' + idx + 1}))}},methods: {tabchange() {}},watch: {radio1: function (val) {if (val === 'tab1') {this.$refs.plTableTab1.doLayout()} else if (val === 'tab2') {this.$refs.plTableTab2.doLayout()}}}}</script>ele 多个表格 tab切换后 多选, 复选出现的问题相关推荐
- element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑 案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
- 不刷新页面的tab_SwiftUI小技巧之如何解决Tab切换后页面重置和List刷新bug
SwiftUI的tabview非常好用,简单几行就能构建一套基于Tab的App.但是SwiftUI目前tabview存在一个小bug,当tab切换时内部中的list或NavigationLink将会重 ...
- Javascript第五章切换层效果、复选框的全选十三课
层切换效果: 效果 复选框的全选
- layui把表格重载为最新状态，复选框选中去重
layui把表格重载为最初始的状态 前端自己操作不调用接口 1.把第一个表格选中的数据显示到第一个表格的下方 2.处理成下边展示的数据需要合并单元格 3.点击删除第一个表格需要重载为不选中无值的状态, ...
- Elementui 表格页面切换后底部空白 el-table__body-wrapper is-scrolling-none 高度变窄
第一步:先在标签内根据自身需要设定最大高度,我这里设定为270px 第二步:在样式中给el-table__empty-block样式类添加高度设置(特别说明,这里最好指明此样式类的上一级样式类,否则 ...
- 关于bootstrap的treeview不显示多选(复选框)的问题，以及联动选择的问题，外加多选后取值...
最近做项目用到了treeview.因为涉及到多选的问题,很是棘手,于是乎,我决定查看原生JS,探个究竟.需要引用官方的bootstrap-treeview.js都知道吧,对于所需要引用的,我就不多说了 ...
- 解决dataTable在element下的tab切换时表头与内容错位问题
项目背景基于第三方为layui开发的老项目,在layui基础上使用element的tab栏,切换下使用dataTable出现表头与内容错位,如下图: 解决办法是: // 处理tab切换后列表样式错乱问 ...
- easyui数据表格显示复选框_【Excel技巧】使用控件一键切换实现单位元和万元随意显示...
工欲善其事,必先利其器.职场上亦是如此.Excel报表想要做得完美,首先肯定Excel要精通. 做一份Excel报表,如果涉及到金额,当金额比较大,单位到底是用元还是万元,经常是大家纠结的一个问题.我 ...
- SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
- element-ui 可复选树型表格
效果 思路 自定义模板 当点击某个行复选框时,其所有后代复选框都要同步状态,且其直系父辈状态需要根据所点击复选框的状态来修正 点击全选复选框时,批量同步所有行内复选框状态 代码 非封装组件,按需自行改 ...
最新文章
- Keil中找不到芯片，往Keil中添加不存在的芯片,Keil安装pack文件
- 计组原理 ： 计算机可靠性概述和性能评价
- 列表,元组,集合,字典常用方法
- 修改同一张表的同一个字段的两个不同的值。
- Web自动化测试中的接口测试
- 微信小程序——商城篇
- java 中方法里的参数_【Java基础】12、java中方法的参数传递机制
- C:\WINDOWS\system32\drivers\etc\hosts
- k3 审核流程图_金蝶K3操作流程图详解(doc 64页)
- 手眼标定原理（眼在手上和眼在手外）
- matlab三角函数运算,MATLAB常用的基本数学函数及三角函数
- TX2与PCA9685驱动舵机(RACECAR)
- air202-DTU接入ONENET平台简单教程
- 外国人聊天常用的缩写（转）
- Codeforces Round #643 (Div. 2)C
- nrm 安装和 nrm命令
- BlackArch---让你有电影中黑客的感觉
- linux入门指南（基础教程）
- CS61A Lab 14
- 广州公布“中国制造2025”实施方案