Element el-table的formatter和scope template不能同时存在问题解决办法
更新时间：2022年08月14日 08:38:23 作者：前热火球员LeBron James
本文主要介绍了ElementUI el-table 的 formatter 和 scope template 不能同时存在问题解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、需求：公司项目中一个需要展示文件信息table表，考虑到文件大小字段展示值后面要加上单位（B,KB,MB,GB），文件大小字段后端没有进行单位转换，准备在前端拿到后转换并且加上单位。
二·、问题：很容易想到了el-table组件formatter属性：
我在el-table-column里面添加属性，进行打印测试，一直不生效，后来经过排查发现事template中插槽作用域导致的，也就是formatter作用于单个字段（即一个el-table-column）就是下面这种：
而我的项目用的是scope template插槽，就是下面这种结构：
这样就产生了问题。
三、解决办法：使用slot，自定义 formatter。上代码：
1.html:
<div v-else-if="item.prop === 'file_size'">
<span v-html="formatter(scope.row.file_size, item.prop)"></span>
</div>
方法中第一个参数为对象值(即value)，第二个参数为对象字段（即key）
2.js:
methods: {
formatter(row, value) {
if (value == "file_size") {
if (row < 1024) {
return row + "B"
} else if (row < 1024*1024) {
return (Number(row) / 1024).toFixed(3) + "KB"
} else if (row < 1024*1024*1024) {
return (Number(row) / 1024 / 1024).toFixed(3) + "MB"
} else {
return (Number(row) / 1024 / 1024 / 1024).toFixed(3) + "GB"
}
}
},
}
四、最后展示效果：
参考资料：
ishell1021
moranrun
Element组件官方文档
到此这篇关于Element el-table的formatter和scope template不能同时存在问题解决办法的文章就介绍到这了,更多相关el-table 的 formatter 和 scope template内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用element-ui,el-row中的el-col数据为空页面布局变乱问题
这篇文章主要介绍了使用element-ui,el-row中的el-col数据为空页面布局变乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了Vue 项目迁移 React 路由部分经验分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了elementui中树形表格切换展开不同层级,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中的el-button样式自定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
本篇文章主要介绍了windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要介绍了vue.js如何更改默认端口号8080为指定端口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue3如何清空Reactive定义的数组问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了v-show和v-if的区别及应用场景，vue中v-show与 v-if的作用效果是相同的，都能控制元素在页面是否显示，但是也有一定的区别，下面文章梳理总结v-show和v-if的区别，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了vue路由传参的基本实现方式,结合实例形式总结分析了vue.js路由传参的三种实现方式,包括params显示传参、不显示参数以及query显示参数传参,需要的朋友可以参考下2020-02-02
Vue.js 核心特性之一就是双向绑定,本文将深入探讨 Vue2 和 Vue3 在双向绑定上的区别,并分析这些改进对性能和开发体验的影响,希望对大家有所帮助2024-11-11
最新评论