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中渲染就可以了

vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）相关推荐

vue中，获取一个div的高赋值给另一个div （自适应）
vue中,获取一个div的高赋值给另一个div (自适应) 问题描述: 左侧是video 为了让video不出现黑边 video是16:9的(怎么写成16:9的盒子下次说), 左侧的高度会随着页面宽 ...
vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
matlab实现一个图像分成两半,1.2 opencv图像处理基本操作
在图像处理过程中.读取图像.显示图像.保存图像足最葙木的操作.本节将简单介绍这几项基本操作. 1.2.1读取图像 OpenCV提供了函数CV2.imread()来读取图像,该函数支持各种静态阁像格式 ...
vue中使用iview UI
iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目.iview自己有一套后台管理模版iview-adm ...
处理Vue中相同组件不同路径的页面重新渲染
很多时候,我们会使用组件化开发,以免写出很多相同的页面代码.那么在配置路由的时候,如何避免相同组件不同路由无法重新渲染的问题呢? // 原来的样子 export const routes = [{pa ...
vue中在哪个生命周期中dom被渲染_vue请求数据放在哪个生命周期？
泻药! 玩vue.或者react或者其他任何mvvm库,很重要的一点是要弄清楚生命周期(不要太重要). 比如拿vue来说,每个生命周期提供的钩子函数,其实对应的是一个完整的vue实例(对象)诞生的过程 ...
cpp 一个文件分成两个文件写_为ORB-SLAM2写一个launch文件
在ros下启动ORB-SLAM2的步骤比较繁琐,比如运行单目版本,首先需要启动相机,然后在新的命令窗口下打开ORB-SLAM2的相应节点,这个步骤需要输入配置好的路径等: # ros 启动orb-sl ...
vue中 element-ui引入阿里巴巴图标库两种办法
一:最初步骤,去阿里巴巴图标库. 过程:https://blog.csdn.net/mmd0308/article/details/78390783 二:配置: 1.在iconfont.css文件中将 ...
VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...

vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）

vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）相关推荐

最新文章

热门文章