elment表格组件a-table属性formatter

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

实现代码
bash 复制代码
<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>
相关推荐
yanyu-yaya21 分钟前
速学兼复习之vue3章节3
前端·javascript·vue.js·学习·前端框架
web小白成长日记24 分钟前
前端向架构突围系列模块化 [4 - 1]:思想-超越文件拆分的边界思维
前端·架构
tkevinjd25 分钟前
3-Vue&Ajax
前端·vue.js·ajax
林恒smileZAZ29 分钟前
前端拖拽,看似简单,其实处处是坑
前端·javascript·vue.js
Filotimo_39 分钟前
那在HTML中,action是什么
前端·okhttp·html
跟着珅聪学java44 分钟前
JavaScript中编写new Vue()实例的完整教程(Vue 2.x)
前端·javascript·vue.js
Pu_Nine_91 小时前
Vue Router 企业级配置全攻略:打造专业级路由系统
前端·vue.js·typescript·vue-router·路由配置
Marshmallowc1 小时前
React 合成事件失效?深度解析 stopPropagation 阻止冒泡无效的原因与 React 17+ 事件委派机制
前端·javascript·react.js·面试·合成事件
遗憾随她而去.1 小时前
前端浏览器缓存深度解析:从原理到实战
前端
万行2 小时前
企业级前后端认证方式
前端·windows