卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › Element render函数中使用map插入多条数据!

Element render函数中使用map插入多条数据!

坚果大叔
2021-10-21 15:06:13技术阅读 3,554

在iview中经常频繁的使用render函数来进行表格的内容动态显示。其插入的方法如下:

{
  title: "参加人员名单",
  align: "left",
  minWidth: 180,
  render: (h, { row }) => {
    return h("div", [
      // 直接map输出即可
      data.map(item => {
        h("p", item.name);
      })
    ]);
  }
}

在Element中render函数的插入方法如下:

const h = this.$createElement;
let messageData = [];

messageData.push(h("span", null, "遍历列表之前的数据"));

// 通过 map 生成的数据
data.map(item => {
    messageData.push(h("span", item.name)
});

messageData.push(h("span", null, "遍历列表之后的数据"));

message: h("div", null, messageData)
问题记录
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
JS批量下载网页中的图片!
上一篇
十月末
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

评论已关闭

热门文章
小程序云开发实现订阅消息推送!
周末出行~
Python定时发送信息到微信
ES6入门之字符串的扩展
网站折腾记
Vite 2.0 发布了
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
幼小衔接启蒙助手更新 v2.0.30
2026-09-20 22:13:00
291 1 0
什么是Agent?
2026-08-15 23:49:12
825 1 2
什么是 Skill?
2026-08-12 21:32:42
770 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
1,406 10 1
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
347
文章
173
评论
434
喜欢