iview 老版本合并单元格

新版的iview中已经支持了合并单元格了,我的版本比较老,为:"iview": "^3.5.2"。暂不支持。记录一下别的大佬的方法。感觉思路比较活,正在这种思路需要在解决问题的过程中学习。

核心思路:通过render方法,加上设置样式实现看似合并单元格。
代码如下:

data数据

dataList = [{index: '1',indexName: 'a',rate: '35%',standard: '描述11111',list: [{ info: "规则1", score: "100" },{ info: "规则2", score: "80" },{ info: "规则3", score: "60" },{ info: "规则4", score: "40" },]},{index: '2',indexName: 'b)',rate: '30%',standard: '描述2222'',list: [{ info: "规则1", score: "100" },{ info: "规则2", score: "80" },{ info: "规则3", score: "60" },{ info: "规则4", score: "40" },] }, ]

列的数据,在此数据中通过render来控制

    columns: any[] = [{title: '序号',key: 'index'},{title: '指标',key: 'indexName'},{title: '权重',key: 'rate'},{title: '评分标准',key: 'standard'},{title: '详情',key: 'list',width: 250,render: (h, params) => { return h('div', {attrs: {class: 'subCol'},}, [h('ul', params.row.list.map(item => {return h('li', {}, item.info)}))])}},{title: '分值',key: 'list',width: 100,render: (h, params) => {  return h('div', {attrs: {class: 'subCol'},}, [h('ul', params.row.list.map(item => {return h('li', {}, item.score)}))])}}, ] 

组件代码

<Table :columns="columns" :data="dataList"  :loading="loading" border></Table>

css

.subCol>ul>li {margin: 0 -18px;list-style: none;text-Align: center;padding: 9px;border-bottom: 1px solid #ccc;overflow-x: hidden;
}.subCol>ul>li:last-child {border-bottom: none
}

实现效果


image.png

参考网站:
https://blog.csdn.net/weixin_34138139/article/details/88600460



喜欢的朋友记得点赞、收藏、关注哦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/904207.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FGMRES(Flexible Generalized Minimal Residual)方法

FGMRES&#xff08;Flexible Generalized Minimal Residual&#xff09;方法是GMRES的变种&#xff0c;主要用于处理变预处理子&#xff08;即每次迭代的预处理子可能不同&#xff09;的情况。与标准GMRES相比&#xff0c;FGMRES通过存储预处理后的向量而非预处理子本身&#x…

自主采集高质量三维重建数据集指南:面向3DGS与NeRF的图像与视频拍摄技巧【2025最新版!!】

一、✨ 引言 随着三维重建技术的飞速发展&#xff0c;NeRF&#xff08;Neural Radiance Fields&#xff09;与 3D Gaussian Splatting&#xff08;3DGS&#xff09;等方法成为重建真实场景和物体几何细节的前沿方案。这些方法在大规模场景建模、机器人感知、文物数字化、工业检…

HarmonyOS Next-DevEco Studio(5.0.2)无网络环境配置(详细教程)

开发者如果电脑处于完全无网环境&#xff0c;可以参考下面文档进行相关配置 DevEco Studio(5.0.2)开发环境一览&#xff1a; 工具版本DevEco Studio5.0.2openHarmonySDK14ohpm5.0.11node.js18.20.1hypium1.0.21 一、下载DevEco Studio&#xff08;5.0.2 Release&#xff09;…

MIT XV6 - 1.1 Lab: Xv6 and Unix utilities - sleep 是怎样练成的?

接上文MIT XV6 - 1.1 Lab: Xv6 and Unix utilities - sleep 探究sleep.c是如何’炼成’的? 老实讲&#xff0c;我不熟悉Makefile&#xff0c;最多写过简单的编译和辅助脚本&#xff0c;拿到Xv6的Makefile是一脸懵的&#xff0c;至今还是一脸懵&#xff0c;那么我们上篇中新加的…

顺序结构双链表的实现

双链表是用最快的时间实现链表的一种方式&#xff0c;具体的实现代码如下&#xff1a; #pragma once #include<stdio.h> #include<stdlib.h> #include<assert.h>typedef int LTDataType; typedef struct ListNode {LTDataType data;struct ListNode* next;/…

GoFrame 奉孝学习笔记

第一章节 GoFrame 是一款基础设施建设比较完善的模块化框架 GoFrame 是一款基础设施建设比较完善的模块化框架, Web Server 模块是其中比较核心的模块,我们这里将 Web 服务开发作为框架入门的选择,便于大家更容易学习和理解。 用GOland编写代码 go.mod module goframePro…

pinia实现数据持久化插件pinia-plugin-persist-uni

在学习uniapp过程中&#xff0c;看到了pinia-plugin-persist-uni插件&#xff0c;以前面试过程中也有面试过说vuex数据刷新之前的数据就丢失了&#xff0c;之前回答的是把数据存储到数据库或者本地存储。pinia-plugin-persist-uni本质上数据也是本地存储。 1、安装 npm instal…

Git 多账号切换及全局用户名设置不生效问,GIT进行上传无权限问题

解决 Git 多账号切换及全局用户名设置不生效问题 在软件开发过程中&#xff0c;我们经常会使用 Git 进行版本控制。有时&#xff0c;我们需要在同一台机器上管理多个 Git 账号&#xff0c;最近我在进行使用git的时候因为项目要进行上传的不同的git账号&#xff0c;但是通过本地…

基于STM32定时器中断讲解(HAL库)

基于STM32定时器中断讲解&#xff08;HAL库&#xff09; 1、定时器简单介绍 以STM32F103C8T6中几个定时器为例&#xff1a; TIM1&#xff1a;这是一个高级定时器&#xff0c;不仅具备基本的定时中断功能&#xff0c;还拥有内外时钟源选择、输入捕获、输出比较、编码器接口以…

UE5 项目迁移 注意事项记录

做项目的时候项目越做越大 132g的体量一旦移动复制就耗时间 这个时候迁移派上了用场 前置知识&#xff1a;会使用基本ue迁移流程 以下是迁移注意事项 迁移步骤 首先把项目插件plugins复制粘贴到新项目中其次把.project文本形式 全部复制粘贴新项目中开始迁移项目 选中要迁移的…

套接字+Socket连接

制作加载中动画&#xff1a; 创建Panel&#xff0c;制作预制体&#xff0c;在Image游戏物体中添加DOTween插件&#xff0c;相关设置如下&#xff1a; (此为DOTween Pro,需付费&#xff0c;也可按下面的数值编写代码解决) Socket套接字 套接字就是将IP地址与主机端口号合并在一…

第 11 届蓝桥杯 C++ 青少组中 / 高级组省赛 2020 年真题答和案解析

一、选择题 第 1 题 单选题 题目:表达式 ‘6’ - ‘1’ 的值是 ( ) A. 整数 5 B. 字符 5 C. 表达式不合法 D. 字符 6 答案:A 解析:在 C++ 中,字符常量以 ASCII 码形式存储。6 的 ASCII 码为 54,1 的 ASCII 码为 49,二者相减结果为 5,是整数类型,因此选 A。 第 2 题 …

使用Rust + WebAssembly提升前端渲染性能:从原理到落地

一、问题背景&#xff1a;为什么选择WebAssembly&#xff1f; 最近在开发数据可视化大屏项目时&#xff0c;我们遇到了一个棘手的问题&#xff1a;前端需要实时渲染10万数据点的动态散点图&#xff0c;使用纯JavaScript Canvas方案在低端设备上帧率不足15FPS。经过性能分析&a…

【沐风老师】3DMAX按元素UV修改器插件教程

3DMAX按元素UV修改器UV By Element是一个脚本化的修改器插件。对于需要创建随机化纹理效果的用户而言&#xff0c;3DMAX的UV By Element修改器无疑是一款高效工具&#xff0c;它将以伪随机量偏移、旋转和/或缩放每个元素的UV坐标。 【版本要求】 3dMax 2016及以上 【安装方法】…

【神经网络与深度学习】改变随机种子可以提升模型性能?

引言 随机种子在机器学习和数据处理领域中至关重要&#xff0c;它决定了模型训练、数据划分以及参数初始化的随机性。虽然固定随机种子能确保实验的可重复性&#xff0c;但改变随机种子有时会意外提升模型性能。本文将探讨这一现象的潜在原因&#xff0c;并揭示随机性如何影响…

java技术总监简历模板

模板信息 简历范文名称&#xff1a;java技术总监简历模板&#xff0c;所属行业&#xff1a;其他 | 职位&#xff0c;模板编号&#xff1a;XDNUTA 专业的个人简历模板&#xff0c;逻辑清晰&#xff0c;排版简洁美观&#xff0c;让你的个人简历显得更专业&#xff0c;找到好工作…

OpenLayers:侦听缩放级别的变化

在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作&#xff0c;因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于OpenLayers中的事件系统&#xff0c;下面我将介绍两个相关的事件。 一、地图事件 moveend 1.介绍 在地图的移动结束…

Langchain4j基于ElasticSearch的向量数据库配置后,启动报错

报错信息: co.elastic.clients.elasticsearch._types.ElasticsearchException: [es/search] failed: [search_phase_execution_exception] all shards failedat co.elastic.clients.transport.ElasticsearchTransportBase.getApiResponse(ElasticsearchTransportBase.java:34…

如何解决 403 错误:请求被拒绝,无法连接到服务器

解决 403 错误&#xff1a;请求被拒绝&#xff0c;无法连接到服务器 当您在浏览网站或应用时&#xff0c;遇到 403 错误&#xff0c;通常会显示类似的消息&#xff1a; The request could not be satisfied. Request blocked. We can’t connect to the server for this app o…

PyTorch 2.0编译模式深度评测:图优化对GPU利用率的影响

一、编译革命的性能拐点 PyTorch 2.0的torch.compile通过TorchDynamo与XLA两种编译模式&#xff0c;将动态图执行效率推向新高度。本文基于NVIDIA A100与Google TPUv4硬件平台&#xff0c;通过ResNet-50、Transformer-XL等典型模型&#xff0c;揭示不同编译策略对GPU资源利用率…