elementUI中,实现一个单元格内显示两行数据,并用其中一个数据进行排序。

2023-11-10

最近在公司中,有这样一个需求,表格中,一个单元格里面显示两行数据,并且可以使用其中一行进行排序,其中数据的样式也要实时变动。类似于下图

这样的话,elementUI中自带的prop就不适合了。所以,需要展示两行数据的地方,我们就用插槽来解决。下面上图。

 

 这里我直接把row解构出来了,如果不想解构,直接把{row}换成你想要的名称就行。
我比较菜,所以动态样式直接用的行内样式。

如果想用其中一个数据排序,这里就可以用上table自带的prop,直接上图。

 这样,就可以用table自带的排序来进行排序了。

因为一个单元格内,有两行数据,这样表格的默认高度就会撑大。可以用下面的代码,修改elementUI中 table的行高,设置el-table-column的默认行高。

  1. :row-style="{height: '0'}"
    
    :cell-style="{padding: '0'}"

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementUI中,实现一个单元格内显示两行数据,并用其中一个数据进行排序。 的相关文章

随机推荐

  • Python_单下划线和双下划线

    属性 x 公有变量 x 私有变量 在py中不能完全做到私有 只能说 伪私有 只是一种良好的书写习惯 不希望被其他类或者子类访问 x 后置下划线 避免与py中的关键字冲突 方法 fun 私有方法 无法在外部直接访问 只能允许本身访问 子类也不
  • 目的:ubuntu配置使用opengl - 初探-创建一个空窗口

    目的 ubuntu配置使用openGL 初探 创建一个空窗口 环境 系统 Ubuntu18 04 环境 g 步骤 Ubuntu下使用openGL 搭建配置环境并测试窗口 1 openGL库 需要单独安装 由于本机是vmware虚拟机Ubun
  • 关于CittyEngine处于加载界面死机的解决方法

    1 CityEngine License无法打开 与已安装的ArcGISAdministrator冲突 在安装后破解是打开CityEngine License警告 试图执行不支持的操作 提示 CityEngine可以独立安装 并不一定要安装
  • 使用vector对数据进行排序(动态排序)

    排序思路 头函数 algorithm 中有一个函数是 upper bound start end value 它可以返回区间 start end 中第一个大于等于 value 的值的位置 再加上 vector 中自带的插入函数 insert
  • 电脑安装了lattice diamond后,再安装lattice radiant,若出现lattice radiant license checkout failed如何解决?

    我电脑安装了lattice diamond 再安装lattice radiant 设置完环境变量后 发现lattice radiant仍然会报错 如下图 检查环境变量和license都并没有什么错误 但是就是一直会出现以下情况 后面如何解决
  • UML 类图

    1 概述 目录 1 概述 1 1 UML概念 1 2 类图的概念 2 类的表示方式 2 1 普通类 2 2 抽象类 2 3 接口 3 类与类关系的表示 3 1 关联关系 Association 3 1 1 单向关联 3 1 2 双向关联 3
  • 【小程序】如何实现从底部弹出对话框

    前面两篇两篇文章介绍了如何在小程序中实现上下滑动效果以及如何用 Canvas 绘制一张图片 这一篇作为前两篇的延续 介绍如何从底部弹出一个对话框 相比而言 底部弹出对话框的功能比较通用 因此非常适合定义成组件 component 先来看一下
  • 【学习记录贴】Vue+Element-UI富文本编辑框及插入图片

    本贴会涉及以下几个技术点 Vue Element UI实现富文本编辑框 以及文本编辑框中事件拦截 插入图片 Element UI限制上传图片后 隐藏上传按钮 官网上是没有这个方法的 可以通过上传到指定张数后隐藏上传按钮来实现 form表单验
  • MyBatis-Plus删除操作知识点总结

    系列文章目录 Mybatis Plus知识点 MyBatis MyBatis Plus的基础运用 心态还需努力呀的博客 CSDN博客 Mybatis Plus SpringBoot结合运用 心态还需努力呀的博客 CSDN博客MyBaits
  • VScode自由切换输出结果窗口,输出到“终端”和“调试控制台”

    Author xiaozhu sai 软件 Visual Studio Code 点击右边的齿轮按钮 打开launch json文件 注意 console 属性即可 具体见一下代码 使用 IntelliSense 了解相关属性 悬停以查看现
  • C++ sort函数自定义排序规则

    在使用vector容器时经常要进行排序 使用排序函数sort非常方便 但是之前都是简单调用sort v begin v end 没有自定义排序规则使用sort函数的额第三个参数 下面对sort总一个简单总结 头文件 include
  • 计算机网络第2章(物理层)

    B站视频 计算机网络微课堂 有字幕无背景音乐版 网址 https www bilibili com video BV1c4411d7jb p 61 目录 2 1 物理层的基本概念 2 2 物理层下面的传输媒体 导引型传输媒体 非导引型传输媒
  • Vue弹窗传值

    场景 点击新增后 需要将这个页面的分类Id传到弹窗页面 新增的时候绑定这个分类 步骤 1 列表页面中弹窗标签中绑定 classifyId this classify
  • 演唱会为什么总是抢不到票?用Python做一个自动抢票脚本!想看谁的就看谁的!

    大麦网 是中国综合类现场娱乐票务营销平台 业务覆盖演唱会 话剧 音乐剧 体育赛事等领域 但是因为票数有限 还有黄牛们不能丢了饭碗 所以导致了 很多人都抢不到票 那么 今天带大家用Python来制作一个自动抢票的脚本小程序 文章末尾看运行效果
  • Java 基于文本界面的《员工管理系统》

    一 代码实现 1 设计分析 该管理系统使用了5个包 Package 类似于文件夹 1 bean 包含员工类 Employee 2 main 主程序的入口 3 service 主要是 业务逻辑层 的功能实现 4 util 存放工具类 此处存放
  • 【springmvc系】利用RequestBodyAdviceAdapter做接口鉴权

    需求 有个简单的需求 对于第三方接口我们需要做个简单的鉴权机制 这边使用的是非对称性加密的机制 我们提供三方公钥 他们通过公钥对接口json报文使用加密后的报文请求 我们通过对接收过来的请求某一个加密报文字段来进行RSA解密校验 考虑到日后
  • hashmap原理_HashMap原理jdk7和jdk8的区别

    一 hashMap的jdk1 7和jdk1 8区别 1 实现方式 jdk7中使用数组 链表来实现 jdk8使用的数组 链表 红黑树 2 新节点插入到链表是的插入顺序不同 jdk7插入在头部 jdk8插入在尾部jdk7中 如何在头部插入 看a
  • [Hadoop3.3.1]:Unable to load native hadoop library for your platform

    需求 linux已经启动了hadoop集群 想要在windows中用java对文件进行下载操作 错误提示 找不到winutils exe hadoop dll没有设置原因 Hadoop访问windows本地文件系统 要求Windows上的本
  • SQL Server数据库进阶

    批处理 将多条SQL语句作为一个整体去编译 生成一个执行计划 然后执行 为了将一个脚本分为多个批处理 可使用GO语句 GO语句的特点 GO语句必须自成一行 只有注释可以在同一行上 它使得自脚本的开始部分或者最近一个GO语句以后的所有语句编译
  • elementUI中,实现一个单元格内显示两行数据,并用其中一个数据进行排序。

    最近在公司中 有这样一个需求 表格中 一个单元格里面显示两行数据 并且可以使用其中一行进行排序 其中数据的样式也要实时变动 类似于下图 这样的话 elementUI中自带的prop就不适合了 所以 需要展示两行数据的地方 我们就用插槽来解决