100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue中使用iview一个数据分成两列渲染(render 竖列 左右不同数据)

vue中使用iview一个数据分成两列渲染(render 竖列 左右不同数据)

时间:2020-07-04 20:15:03

相关推荐

vue中使用iview一个数据分成两列渲染(render 竖列 左右不同数据)

我在项目中有一个需求是下面这样的样式

开始的思路是使用iview中的table的columns,给表头数据数据使用render渲染不同的数据(如下)

{title: '旧版本',key: 'name',align: 'center',render: (h, params) => {if (this.data3.length !== 0) {if (!this.data3[params.index].showSelect) {return h('div',[h('strong', {}, this.data3[params.index].name)]);} else {return h('div',[h('Button', {}, '选择')]);}} else {return h('div',[h('Button', {}, '选择')]);}}},{title: '新版本',key: 'name',align: 'center',render: (h, params) => {return h('div',[h('strong', {}, this.data4[params.index].name)]);}}

可是后来发现我们的需求这种形式无法满足,所以我就改变了一种思路,把旧版本和新版本的数据都存在一个对象中,放到一个数组里面,再拿这个数组进行渲染就可以了,代码如下(因为在项目中,代码可能贴的不全,贴点主要代码)

arr.push({oldName: '',ohash1: '',id: '-1',newName: nval.name,nhash1: nval.sha1_hash,newFile: nval.file})

直接用这个数组在iview的table中渲染就可以了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。