element ui - el-table给单元格添加点击事件

7月前作者：nunumaymax 分类：Toy博客阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了element ui - el-table给单元格添加点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景描述：

el-table中，点击版本号触发查看配置功能，但是产品想将热区扩大，从点击版本号扩大到点击整个单元格都可以查看。

el-table点击事件,element-ui,elementui

解决方案：

在 el-table-column 中的 template 标签里，添加一个 div元素包裹版本号和el-tag，将点击事件绑定在div元素上：文章来源地址https://www.toymoban.com/news/detail-529034.html

<el-table :data="currentPageData" border style="width: 100%">
	...
	<el-table-column prop="version" label="版本号" width="250">
    	<template slot-scope="scope">
    		/* 将点击事件绑定在div元素 */
            <div @click="lookCfg(scope.row)">
              <a href="javascript:;">{{ scope.row.version }}</a>
              <el-tag type="info" size="small">历史版本</el-tag>
            </div>
        </template>
	</el-table-column>
	...
</el-table>

到了这里，关于element ui - el-table给单元格添加点击事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：

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

element-ui中的el-table合并单元格

在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 1：html部分所谓的合并行就是将多行相同

2024年02月10日
浏览(31)
element ui修改el-table表格单元格边框颜色

element-ui官网第一步：设置除表头单元格边框样式 :cell-style=“{borderColor:‘#01e3ed’}” 第二步：设置表头单元格边框样式 :header-cell-style=“{borderColor:#01e3ed}” 第三步：单独给表格加样式加个类名class=“exporttable” 第四步：功能实现 -点赞 + 收藏！你是最美的！

2024年02月14日
浏览(25)
element-ui el-table 如何实现合并单元格

el-table的组件的可以合并单元格，先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。比如：代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区，具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

2024年02月03日
浏览(36)
element-ui中el-table点击其他自定义按钮展开table中某一行

在日常开发中，我们遇见了会有点击某些按钮，使得表格行展开的需求，这时候去查看文档 element-ui（table）这里官方提供了示例为在行最左侧有一个展开合并icon，但是点其他地方不能展开，我们又想点其他地方而展开我们看见是在table-column上定了type为expand，而该列里面的

2024年01月18日
浏览(29)
[element-ui] el-table行添加阴影悬浮效果

问题: 在el-table每一行获得焦点与鼠标经过时，显示一个整行的阴影悬浮效果没有什么效果原因: box-shadow对display:table-row元素是不起作用的解决方案：弊端给el-table行加阴影的问题算是解决了，但是却导致表格内容无法操作 1、通常，项目设计中，el-table会带一些按钮，比如

2024年02月04日
浏览(33)
[element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

只是单纯的想在table中添加图标和tooltip 在el-table-column中绑定:render-header=“renderPrice” (此方法无法使tooltip换行) 方法二、使用组件插槽，elementui已封装好 elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

2024年02月11日
浏览(33)
Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法

记录一下工作时遇到的 el-table 合并单元格的需求，超详细😊 el-table官方提供了合并单元格的方法与返回格式如下: 根据叙述有了如下思路: 因为后端返回的数据非统一, 可能不是按照类别排好的😨, 所以官网的例子满足不了所有的需求所以我们通过遍历table的数据比较前后两

2024年02月12日
浏览(53)
【vue】element-ui、el-table使用V-for循环动态添加表头和数据

参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271

2024年02月11日
浏览(60)
el-table点击单元格可编辑

template div el-table @cell-click=\\\"cellClick\\\" :row-class-name=\\\"tableRowClassName\\\" :cell-class-name=\\\"tableCellClassName\\\" :data=\\\"tableData\\\" style=\\\"width: 500px\\\" border el-table-column prop=\\\"weightName\\\" label=\\\"权重项\\\" template slot-scope=\\\"{ row, column }\\\"

2024年02月12日
浏览(31)
el-table点击表格某一行添加到URL参数，访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]

需求：有个表格列出了一些行数据，每个行数据点击后会加载出对应的详细数据，想要在点击了某一行后，能够将该点击反应到URL中，这样我复制这个URL发给其他人，他们打开时也能看到同样的行数据。 url会根据点击动态更新，大概是这样 xxx.com?param1=var1param2=var2 主要版本

2024年02月14日
浏览(39)