关于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 echarts 实现离线中国地图的示例代码(细化到省份)
这篇文章主要介绍了Vue echarts 实现离线中国地图,细化到省份,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09解决antd的Form组件setFieldsValue的警告问题
这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10Vue中data传递函数、props接收函数及slot传参的使用及说明
这篇文章主要介绍了Vue中data传递函数、props接收函数及slot传参的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10VUE解决微信签名及SPA微信invalid signature问题(完美处理)
这篇文章主要介绍了VUE解决微信签名及SPA微信invalid signature问题(完美处理),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-03-03vue3 ts组合式API异常onMounted is called when&
这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-05-05
最新评论