iview 一列表格显示多个tag

女爷i 2022-12-10 02:28 284阅读 0赞

因为本身iview写表格的操作栏“修改”、“删除”就用了render函数来渲染，所以显示tag也用render渲染了

{ 
    	title: '业务标签/分类',
    	key: 'tags',
    	render: (h, params) => { 
    		let arr = (params.row.tags || "").split(";")	
    		//因为我自己给的实例data里有的tags为空，split控制台会报undefine的错，所以加上||
    		console.log(arr)
    		return h('div',arr.map(function(item,index) { 
    			return h('Tag', { 
    				domProps:{ 
    					innerHTML: item || "无"
    				}
    			})
    		}))
    	}
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc2OTE3NQ_size_16_color_FFFFFF_t_70_pic_center]  
写成博客感觉不难，鬼知道我纠结了多久  
参考了[官方文档][Link 1]、[另一个朋友写的render渲染循环][render]

后续应该还要从后台获取数据再渲染，估计又要battle一阵，整出来了再贴篇博客吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc2OTE3NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6f64e2ce5b644a79b52b65b685a1af65.png
[Link 1]: https://cn.vuejs.org/v2/guide/render-function.html
[render]: https://blog.csdn.net/Songlinlin_/article/details/84634646

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关动态显示与隐藏表格的列

一、整个表格（表头加数据）动态变化： 1、效果： ![20200609163545641.png][] 点击表头，弹出选择框： ![20200609163623496.

ゞ浴缸里的玫瑰/ 2023年02月16日 10:56/ 0 赞/ 30 阅读

相关表格多列合并

要实现的效果 : ![表格合并][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

小鱼儿/ 2023年01月11日 01:09/ 0 赞/ 18 阅读

相关 iview 一列表格显示多个tag

因为本身iview写表格的操作栏“修改”、“删除”就用了render函数来渲染，所以显示tag也用render渲染了 { title: '业务标签/分类'

女爷i/ 2022年12月10日 02:28/ 0 赞/ 285 阅读

相关 View UI （iview）表格合并单元格（行/列合并）

> 有时我们在开发过程中会遇到表格里有合并单元格的需求。 > 今天以View UI （iview）组件库为例。 1. 打开[iview官网-table][iview_-t

约定不等于承诺〃/ 2022年10月14日 11:56/ 0 赞/ 479 阅读

相关 iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）

开发中遇到这样一个需求，该项目用的是[iview UI组件][iview UI]，需求是：表格列头有一个字段和一个单位，两者样式不同，理想效果如下：“建筑面积四个字为`1

心已赠人/ 2022年10月13日 02:57/ 0 赞/ 17 阅读

相关 Excel下拉框多列显示，如何只显示一列

小编最近接手一个项目，之于需要导数据，但是我们需要提前把表头什么的设置好，更方便其他小伙伴们帮助我们导入数据，小伙伴们都知道，在excel中设置下拉菜单很简单，直接用数据有效性

ゝ一世哀愁。/ 2022年07月16日 13:09/ 0 赞/ 665 阅读

相关 iview表格

这个设计的真好，向iview作者致敬 <template> <Table border :columns="columns1" :data="data

缺乏、安全感/ 2022年04月10日 09:23/ 0 赞/ 276 阅读

相关 layui 表格操作列按钮动态显示

1、根据表格数据动态显示操作列按钮 <script type="text/html" id="barDemo"> { { if (d.eve

末蓝、/ 2022年02月28日 15:40/ 0 赞/ 526 阅读

相关 iview表格内容居中

一般的iview的表格的样式![在这里插入图片描述][20190329092730486.png] 表格内容都是居左显示的，如果表格的内容很多的话，如下： ![

女爷i/ 2022年02月26日 05:38/ 0 赞/ 804 阅读

相关 iview表格某列添加文字样式

比如Table中某一列的文字太多显示不方便，则可以一行显示，多余的用省略号代替，实现方法： 1、给当前列添加自定义class名称 { t

末蓝、/ 2022年01月14日 10:39/ 0 赞/ 348 阅读