Vue3 动态列 <el-table-column> 实现 formatter 的两种方法

news/2025/3/14 22:52:26/

文章目录

    • 动态列实现
    • 动态列实现formatter
      • `第一种`
      • `第二种方法`

动态列实现

参考此篇文章 Vue3 动态列实现

动态列实现formatter

第一种

以此为例:传递该行的wxUserInfo字段(对象)中的nickName

  • 假设该行

{prop: "wxUserInfo", label: "用户昵称", minWidth: "110", align: "center", tooltip: true, resizable: true,},

<el-table-columnv-for="item in showList":label="item.label":key="item.prop":fixed="item.fixed":align="item.align":prop="item.prop":min-width="item.minWidth":width="item.width":show-overflow-tooltip="item.tooltip":resizable="item.resizable"><template v-slot="scope" v-if="item.prop == 'wxUserInfo'">{{ formatWxUserInfo(scope.row) }}</template></el-table-column>
const formatWxUserInfo = (row) => {return row.wxUserInfo.nickName;
}

第二种方法

个人比较喜欢第二种,简单的东西就不要浪费时间。

      <el-table-columnv-for="item in showList":label="item.label":key="item.prop":fixed="item.fixed":align="item.align":prop="item.prop":min-width="item.minWidth":width="item.width":show-overflow-tooltip="item.tooltip":resizable="item.resizable"><template v-slot="scope" v-if="item.prop == 'wxUserInfo'">{{ scope.row.wxUserInfo.nickName }}</template></el-table-column>

http://www.ppmy.cn/news/1016164.html

相关文章

8月8日上课内容 研究nginx组件rewrite

location 匹配uri location 匹配的规则和优先级。&#xff08;重点&#xff0c;面试会问&#xff0c;必须理解和掌握&#xff09; nginx常用的变量&#xff0c;这个要求掌握 rewrite&#xff1a;重定向功能。有需要掌握&#xff0c;有需要理解的。 location匹配&#xff1a;…

leetcode2809. 使数组和小于等于 x 的最少时间 排序+0-1背包

https://leetcode.cn/problems/minimum-time-to-make-array-sum-at-most-x/ 给你两个长度相等下标从 0 开始的整数数组 nums1 和 nums2 。每一秒&#xff0c;对于所有下标 0 < i < nums1.length &#xff0c;nums1[i] 的值都增加 nums2[i] 。操作 完成后 &#xff0c;你…

Vue [Day5]

自定义指令 全局注册 和 局部注册 inserted在指令所在的元素 被插入到页面中时&#xff0c;触发 main.js import Vue from vue import App from ./App.vueVue.config.productionTip false// 1.全局注册指令 Vue.directive(focus, {// inserted在指令所在的元素 被插入到页…

react进阶

react-virtualized的高阶组件&#xff0c;Autosize可以使屏幕适配。使用render-props模式来获取到AutoSizer组件暴露的width和height属性。JSON.parse(JSON.stringify())不适用于有undefined的数据。 深拷贝的使用&#xff0c;不能使用在有undefined的数据中。有直接过滤undefi…

【Vue3】插槽全家桶

插槽&#xff08;Slots&#xff09;是 Vue.js 框架中的一个功能&#xff0c;允许在组件内部预留一些可替换的内容。通过插槽&#xff0c;可以给父组件填充模板代码&#xff0c;让父组件向子组件传递自定义的内容&#xff0c;以便在子组件中进行展示或处理。 1. 匿名插槽 Son.…

深入探索 Spring MVC:构建优雅的Web应用

文章目录 前言一、什么是 Spring MVC1.1 什么是 MVC1.2 什么是 Spring MVC 二、Spring MVC 项目的创建2.1 项目的创建2.2 第一个 Spring MVC 程序 —— Hello World 三、RequestMapping 注解3.1 常用属性3.2 方法级别和类级别注解3.3 GetMapping、PostMapping、PutMapping、Del…

【算法|数组】手撕经典二分法

算法|数组——二分查找 文章目录 算法|数组——二分查找引言二分查找左闭右闭写法左闭右开写法 总结 引言 首先学习这个算法之前需要了解数组知识&#xff1a;数组。 大概介绍以下&#xff1a; 数组是存储在连续内存空间上的相同类型数据的集合。数组下标都是从0开始。数组在…

深入探索C++模板:从基础到高级应用

目录 一、 泛型编程 1.1 为什么需要泛型编程&#xff1f; 二、模板 2.1 概念 2.2 函数模板 2.2.1 概念 2.2.2 语法 2.2.3 示例 2.2.4 模板实例化 隐式实例化 显示实例化 2.2.5 模板参数的匹配原则 2.3 类模板 2.3.1 概念 2.3.2 语法 2.3.3 示例 2.3.4 注意事项…