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

最新推荐文章于 2024-08-28 18:41:55 发布

失眠的咕噜

最新推荐文章于 2024-08-28 18:41:55 发布

阅读量6.7k

点赞数

分类专栏： vue+iview（table）文章标签： vue iview table columns data1

本文链接：https://blog.youkuaiyun.com/weixin_44104341/article/details/88659045

版权

本文介绍如何在Vue项目中利用Ivew的Table组件，通过render方法和自定义数据结构，实现一个数据分成两列的竖列渲染效果，满足左右两侧显示不同数据的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

开始的思路是使用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', {
                      }, '选择')