代码编织梦想

table中列属性formatter,格式化表格数据->处理表格中显示的内容(像根据状态数值去显示当前状态对应的中文,或者处理一些是与否相间等)

实现代码
<template>
	<el-table-column 
      		v-for="(item,index) in columns" 
      		:prop="item.prop" 
      		:label="item.label" 
      		:width="item.width || ''" 
     		:formatter="item.formatter">
      </el-table-column>
</template>

<script setup>
const columns = ref([
  {
    label: '项目名称',
    prop: 'projectName' 
  },
  {
    label: '状态',
    prop: 'isEnable',
    formatter: (row) => {
      let curStatus = '';
      projectsData.findIndex(item => {
        if(item.value == row.isEnable) curStatus = item.label;
      })
      return curStatus
    }
  },
])
</script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wch19960518/article/details/139502881

ElementUI el-table 的 formatter 和 scope template 不能同时存在问题解决办法-爱代码爱编程

一、需求:公司项目中一个需要展示文件信息table表,考虑到文件大小字段展示值后面要加上单位(B,KB,MB,GB),文件大小字段后端没有进行单位转换,准备在前端拿到后转换并且加上单位。 二·、问题:很容易想到了el-table组件formatter属性: 我在el-table-column里面添加属性,进行打印测试,一直不生效,后来经过排查发现事temp

Element UI踩坑记 —— el-table中 formatter 的属性居然失效了-爱代码爱编程

一、问题引入 今天实习要完成一个数据表格的小案例,要求是能根据数据的严重程度,在页面上显示不同的样式。 我是使用element-ui中的表格组件对数据进行处理,在处理的过程中就掉进坑里。el-table 组件结合插槽和数据格式化(formatter)时,是数据格式化是不会生效的。 解决方法:只能自己封装el-table中formatter方法 二、

element ui 中 el-table formatter scope template 同时存在的问题__格鲁特宝宝的博客-爱代码爱编程

formatter  正常使用 formatter  <el-table-column prop="title" label="标题" :formatter="(row, column, cellValue, index) => stateFormat(row, column, cellValue, index, 20)"></

element-ui表格table详解-爱代码爱编程

先给大家展示一下效果 Table 属性  属性名说明类型可选值默认值data显示的数据array——heightTable 的高度, 默认为自动高度。 如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会

掌握el-爱代码爱编程

前言 数据可视化是现代软件开发中必不可少的一环。而在开发中,el-table 作为一款常用的表格组件,其通过 formatter 方法可以轻松实现数据格式化。本文将为大家详细介绍 el-table 的 formatt

vue3实战 第十二章 表格组件里el-爱代码爱编程

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 往期热门专栏回顾 专栏描述Java项目

二次封装的el-爱代码爱编程

情景 el-table-column里面添加formatter 对值进行格式化,一直不生效,后来发现是template中插槽作用域导致的,也就是formatter作用于单个字段(即一个el-table-column)就是下