关于Element-UI Table 表格指定列添加点击事件
更新时间：2022年09月07日 09:11:43 作者：沃特艾文儿～
这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Element-UI Table 表格指定列添加点击事件
如下图所示，这是一个ele UI库中的table，一般情况下我们只能通过tableDATA来向里面填充数据来展示，而无法对其中添加点击时间等操作。这里就来记录学习一下。
这是我们的一般使用方法，只能将数据进行展示。我们需要在el-table-column标签里面来进行处理
<el-table :data="tableData" style="width: 100%;height: 450px;"
:row-class-name="tableRowClassName">
:row-class-name="tableRowClassName">
<el-table-column
prop="title"
label=""
width="500">
</el-table-column>
<el-table-column
prop="author"
label=""
width="100">
</el-table-column>
</el-table>
我们在标签里面加上我们自定义的标签，可以通过{{scope.row.title}}的方法来获取数据，并来修改展示的效果。
如下面所示。
<el-table :data="tableData" style="width: 100%;height: 450px;"
:row-class-name="tableRowClassName">
:row-class-name="tableRowClassName">
<el-table-column
prop="title"
label=""
width="500">
<template slot-scope="scope">
<a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{
scope.row.title
}}</a>
</template>
</el-table-column>
<el-table-column
prop="author"
label=""
width="100">
</el-table-column>
</el-table>
element-ui table表格错位问题
问题描述
在使用element-ui中的 el-table 时，使用了 fixed 属性固定列之后，就会容易在各种场景出现表格错位的问题。
解决方案
解决办法1 element-ui官网提供的doLayout方法：
doLayout：对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
直接在渲染表格时加入此方法
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})解决办法2 element-ui官网提供的doLayout方法：
1.给所有的列增加width,即可解决
2.把 加了fixed属性的 固定列的 min-width 改成 width
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue如何在页面刷新时进行重定向,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下2025-01-01
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题
这篇文章主要介绍了vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 原因,本文给出出现此类问题的原因所在并给出解决方法，需要的朋友可以参考下2022-09-09
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下2023-09-09
element-ui重置resetFields()不生效的解决
本文主要介绍了element-ui重置resetFields()不生效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
在Vue中,$router.push方法默认不支持在新窗口中打开页面,但通过结合window.open方法和$router.resolve方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-09-09
这篇文章主要介绍了vue @input和@click的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
当容器有滚动条时,有时需要将滚动条滑到某个位置,下面这篇文章主要给大家介绍了关于vue控制滚动条滑到某个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了让你30分钟快速掌握vue3，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了页面内锚点定位及跳转方法总结，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论