el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法

这篇具有很好参考价值的文章主要介绍了el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法

一、问题重现 当不点击单选按钮时 就正常不会出问题 当点击单选框时点击事件会执行两次

<el-table
    v-bind="$attrs"
    v-on="$listeners"
    ref="singleTable"
    border
    size="mini"
    highlight-current-row
    @row-click="onRows">
    <el-table-column  width="35" >
      <template slot-scope="scope">
        <el-radio  :label="scope.row" v-model="radioRow">&nbsp;</el-radio>
      </template>
    </el-table-column>
    <slot></slot>
</el-table>

二、解决方式

代码如下(示例):文章来源地址https://www.toymoban.com/news/detail-753029.html

// 参数 row col  e 事件
 onRows(row,c, e){
 	// 因为单选框和复选框底层都是input 所以  判断tagName === input 不处理就行
    if (e.target.tagName === 'INPUT') return;
},

到了这里,关于el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(50)
  • el-table 表格头部合并

    就是这样哟

    2024年02月14日
    浏览(43)
  • el-table 实现表、表格行、表格列合并

    最近写vue开发项目的时候,很多地方用到了Element组件中的Table 表格。经过一周的边学边做,我总结了以下三种有关表格的合并方法。 话不多说,先看效果图  代码如下: 表格结构如上,其中:header-cell-style对表头做了一些处理。  效果图如: 代码如下: 要进行表格合并,关

    2024年02月09日
    浏览(36)
  • 可编辑的el-table表格

    可编辑的el-table表格,可以结合input输入框,select选择框,tree树形结构等。 实现序列递增,删除的序列不会再出现。 效果图 html部分代码 js部分代码

    2024年02月14日
    浏览(43)
  • el-table-如何刷新表格数据

    表格里面的数据更新后,可以通过以下方法来刷新表格 方法一  用更新后的数据,覆盖之前的数据 var newTableData=[]; for(var i=0;ithat.tableData.length;i++){        if(aId==that.selectStationIdbId==that.selectDeviceId){         that.tableData[i].physicalid=physicalId;     }     newTableData.push(that.tableData[i

    2024年02月09日
    浏览(35)
  • el-table实现嵌套表格的展示

    需求 一个表单中存在子表 列表返回格式 实现 实现思路 el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式 将共同的列放到一列中,通过渲染自定义表头 render-header ,将表头按照合适的宽度渲染出来 根据数据渲染表头 调样式,慢慢调到合适就行 完整代码

    2024年02月21日
    浏览(46)
  • 【el-table的表格宽度自适应】

    el-tale组件在表头中只提供了一个width属性来控制表格的宽度,如果将其写死,则会针对过长的内容可能会有溢出换行、针对过短的内容可能会出现占位过多,所以就写了一个js文件来根据字符的长短来返回相应的宽度。 代码如下(示例):

    2024年02月16日
    浏览(42)
  • vue封装el-table表格组件

    先上效果图: 本文包含了具名插槽、作用域插槽、jsx语法三种: Render.vue( 很重要,必须有 ): Table.vue 使用Table组件

    2024年02月20日
    浏览(41)
  • el-table表格设置——动态修改表头

    (1.1)使用el-popover,你需要修改的是 this.colOptions,colSelect : (1.2)js代码中的data (1.3)js中的methods (2.1)html代码 (2)js中的method写:

    2024年02月06日
    浏览(55)
  • el-table表格实现自动滚动效果

    table页面的内容如果超出设定的height会出现自动无限滚动的效果,如下所示: 先给el-table一个ref属性 然后获取到这个属性 在mounted阶段执行scrollFun函数,通过setTnterval定时器来实现动态滚动效果,代码如下: 如果出现列表字段过长时,可使用tooltip-effect=“dark” 搭配 show-overf

    2024年02月13日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包