el-table 多个表格切换多选框显示bug

这篇具有很好参考价值的文章主要介绍了el-table 多个表格切换多选框显示bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天写了个功能,点击左侧的树做判断,一级树节点显示系统页面,二级树节点显示数据库页面,三级树节点显示表页面。

数据库页面和表页面分别有2个el-table  ,上面的没有多选框,下面的有多选框

el-table 多个表格切换多选框显示bug,vue.js,elementui,js,前端框架

 现在出现bug,在点击树节点,代码:

// 点击节点

    nodeClick(data) {

      if(data.type == "datasource" || data.type == "table" || data.type == "compony"){

        this.tableType = data.type;

        if(this.tableType == "compony"){

          this.getComponyInfo(data)

        }

        if(this.tableType == "datasource"){

          this.sourceTableTableQuery.datasourceId = data.id

          this.getDatasourceInfo(data.id)

        }

        if(this.tableType == "table"){

          this.sourceTableColumnQuery.datasourceId = data.datasourceId

          this.sourceTableColumnQuery.tableName = data.label

          this.getTableInfo(data)

        }

      }

    },

在datasource(库页面)和table(表页面)之间切换,多选框一会在上,一会在下,

el-table 多个表格切换多选框显示bug,vue.js,elementui,js,前端框架

 解决方法,给有多选框的表格添加     :key="Math.random()"   或者 :key="1"  :key="2" 写死也行

el-table 多个表格切换多选框显示bug,vue.js,elementui,js,前端框架

记住是给所有有多选框的表格加,或者给所有表格加也行,加key是好事,可以运行快

我还发现只给其中一个有多选框的表格加又出现这种bug,代码中只给下面的表格写多选框了

el-table 多个表格切换多选框显示bug,vue.js,elementui,js,前端框架

 文章来源地址https://www.toymoban.com/news/detail-665208.html

到了这里,关于el-table 多个表格切换多选框显示bug的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-table多选框禁用

    el-table多选框有时需要禁用,selectable为true此行数据不禁用,为false则本行禁用 判断是否禁用方法函数:

    2024年02月15日
    浏览(32)
  • vue el-table 多选框回填

    主要代码: 效果: html js

    2024年01月18日
    浏览(35)
  • el-table中设置第一列为多选框,且多选框动态禁用

    给el-table第一列写成以下代码: 效果: 多选框动态禁用 el-table中设置了 type=\\\"selection\\\",但是由于部分数据是已经处理过的,不允许选中,但是其他的数据有可以多选的时候,我们需要动态的判断每一行的数据是否可以选中, type=\\\"selection\\\"时有这样一个属性: 所以我们只需要动态

    2024年01月18日
    浏览(29)
  • el-table(type=“selection“)多选框两种回显

    目录 一、前端数据回显(页面间数据展示) 1、图片帮助理解 2、描述: 3、代码 4、两个API,一个v-model 二、数据库数据回显  1、描述: 2、核心代码: 3、比较完整代码:(这是element ui官方文档上的) 4、改动过的,更加适应现实场景的代码:     几个注意点: 1、图片帮助理解

    2024年02月02日
    浏览(25)
  • 实现el-table两列多选框且不可同时勾选

    1、效果图如下,功能:必修和选修不可同时勾选 2、代码如下

    2024年02月11日
    浏览(32)
  • el-table多选框设置默认选中,翻页保留选中状态

    最近碰到个需求,el-table列表渲染数据,要求有多选框并且附带默认选中,翻页后保留选中状态 写默认选中时百度一下还很简单,但是碰到个bug,第一次翻页可以保留,第二次翻页回来之后选中的就没了。 经过研究解决,记录一下,直接上代码了 默认选中只需要给table增加

    2024年02月14日
    浏览(41)
  • el-table select 多选框如何实现选中数据回显

    现象描述: 将用户勾选的内容添加到表格,当页面还未关闭时,选项还是正常勾选,但是只要退出该页面,再进来就会发现勾选被取消了 需求描述: 已选择项默认勾选,且表格内容更改,勾选项也同步更改 效果如下:

    2024年02月14日
    浏览(34)
  • el-table @selection-change实现多选框的效果以及可以进行批量删除的操作

    2023.2.2今天我学习了如何在表格中添加多选框并且可以进行多选的效果,以及可以进行批量删除的操作。 效果:      html代码如下: js代码如下:

    2024年02月08日
    浏览(25)
  • el-table多选表格 实现默认选中 删除选中列表取消勾选等联动效果

    实现效果如下: 代码如下:

    2024年02月08日
    浏览(37)
  • element-ui el-table表格勾选框条件禁用,及全勾选按钮禁用, 记录

    表格的部分内容是可以被勾选的,部分内容是不可以被勾选的 使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的 要求el-table表格中,部分内容不可以被勾选,全选框在没有可选内容时,是禁用状态 如上图所示,要求数据id是1或者2的数据不可被选择,当数据只剩下id为

    2024年01月22日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包