iview 一列表格显示多个tag

女爷i 2022-12-10 02:28 223阅读 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 条评论，223人围观）

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

相关阅读

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

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

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

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

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

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

相关表格(TABLE)标记(TAGS)

表格的基本语法 <table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元(表格的具体数据)

深藏阁楼爱情的钟/ 2022年09月20日 12:33/ 0 赞/ 152 阅读

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

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

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

相关 table表格列随鼠标高亮显示

前言在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）![在这里插入图片描述][watermark_type_Z

怼烎@/ 2022年04月17日 07:15/ 0 赞/ 451 阅读

相关 iview表格

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

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

相关 mysql查询时，把一列中的数据多列显示

mysql查询时，把一列中的数据多列显示在进行多表查询时，把一列中的数据多列显示，可以使用子查询的方式：最近在项目中遇到的问题: 表busic\_project\

川长思鸟来/ 2022年03月28日 07:48/ 0 赞/ 848 阅读

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

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

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

相关 iview表格内容居中

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

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

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

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

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