element-plus Table 表格自定义列模板使用及问题

想要在表格中自定义列内容，是通过在el-table-column中使用slot实现的。

比如我现在传入表格的列内容需要格式化字符串再输出，就需要用到这个特性。

首先上一段代码，3行两列的数据，我需要在name显示的数据前都加个a字符，为了测试这个过程，我在showname这个函数内打印下调用编号。

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="date" width="180"/><el-table-column label="Name" width="180"><template #default="scope"><span v-text="showname(scope.row.name)"></span></template></el-table-column></el-table>
</template>
<script setup>
let cntname=0;
function showname(name){cntname++console.log("name" + cntname + ":" +name);return "a" + name;
}
const tableData = [{date: '1',name: 'a',},{date: '2',name: 'b',},{date: '3',name: 'c',},
]
</script>

按照设想，showname应该调用3次。但是运行后打印结果是这样，调用了7次。

经过增加数据的列在测试。我得出了结论：每个自定义的列内，会先来一行表头，所以scope.row内没有该列数据，第一次调用会进来一个未定义。然后数据初始化时，table数据会重复刷一次！我突然想起来以前用el-image时好像遇到过，el-image在请求图像地址时候发了两次，后来用了原生的img。

所以需要注意的就是如果你有调用函数来处理自定义列，一定要注意数据未定义判断，否则就会运行函数出问题。

element-plus Table 表格自定义列模板使用及问题相关推荐

解决element UI table 表格固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...
记录：element UI table 表格固定列单元格上下错位
一.表格添加ref <el-table ref="table"></el-table> 二.页面切换或数据更新时调用 this.$nextTick(() = ...
Element：Table表格在单元格内放多个数据
在练习时候用Element的Tab表格的时候,需要在表头下的单元格内把数组的图片和名字放在同一格 (改好才发现挺憨的,这么一个简单的错误..) 但是在使用el的Tab表格时候,在<el-tabl ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
7.2DIY可视化后台表格自定义列显示类型
后台表格自定义列显示类型本教程均在第一节中项目启动下操作后台表格自定义列显示类型前言一.图片格式内容显示: 二. 效果展示: http://localhost:9999/#/hdp 三:自定义 ...

element-plus Table 表格自定义列模板使用及问题

element-plus Table 表格自定义列模板使用及问题相关推荐

最新文章

热门文章