cool-admin应对一个页面出现多个表格【element-ui解决】

2023-11-10

项目背景:在一个页面中引入三个表格的需求(这里以两个为例子好了)

这里是失败的例子

cool-admin中的cl表格可以实现出现这两个表格

 这是data中return回来的

使用封装好的onload方法,调用server接口,实现从后端获取数据展示出来 

注意这里后端返回的数据格式必须是list数组,数组中对应的每一条数据和table中字段对应,这是组件封装好的必须使用list,切记

比如这里table中有两条数据值,那么页面显示的时候也会有两个列叫备注和说明,list返回的数据也只能是

[{remark:'备注1',des:'说明1'},{remark:'备注',des:'说明'}]

类似这种,页面就会展示两条数据。

但是由于是两个数据表,所以返回一个list数据无法分配的,因为单纯的cloums无法检测是哪个表对应了list中的哪些数据,返回两个list也是不行的,前面说过只能使用叫list的数组。。。。

所以这种方法只能pass了。。。。。。

正解:

前面的方式使用的是cl-table的方式,cool-admin是基于element-ui的框架,所以找到了element-ui作为解决方案了。

 使用下面的方式就能插入很多表格了。。。

在之前写cl-table的地方替换成el-table

 缩进的地方按照饿了么组件里那种写法就行,后面做的事就是从后端获取数据然后绑定在table1,table2上就行了。

 我的做法是在刷新的钩子里面写了函数,回调获取了后端的数据,这里最开始在生命周期里写了不太成功放弃了。。。

然后就是这样。后端接口的数据那块就看返回是什么,直接赋值过来就行了

 最后就是页面上有数据展示了。

刷新的钩子需要在cl-crud里面配置一下:onRefresh="onRefresh"

因为这个问题我忙活了半天,唉。

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

cool-admin应对一个页面出现多个表格【element-ui解决】 的相关文章

随机推荐

  • Java基础——环境变量配置、注释、关键字、标识符

    目录 01 01 计算机基础知识 计算机概述 01 02 计算机基础知识 软件开发和计算机语言概述 01 03 计算机基础知识 人机交互 01 04 计算机基础知识 键盘功能键和快捷键 01 05 计算机基础知识 如何打开DOS控制台 01
  • mes选型与实施指南_中小制造企业,如何选型信息系统?

    一 前言 最近走访客户和讲课比较多 接触到了大量的中小制造企业 深刻体会到了制造企业的焦虑 也深刻体会到了中小企业期望进行数字化转型 期望实现智能制造的迫切愿望 但是受限于人才 受限于知识 受限于经验 对实现企业信息化的过程中 过多受到乙方
  • Revit 2011二次开发之得到选择的对象

    start Transaction TransactionMode Manual Regeneration RegenerationOption Manual public class Document Selection IExterna
  • 微前端介绍

    提到微前端 稍微懂微前端的同学 可能会这样问 为什么不用iframe方案呢 其实 如果不考虑体验问题 iframe方案几乎是最完美的微前端解决方案 iframe最大的特性就是提供了浏览器原生的硬隔离方案 样式隔离 js隔离 但它最大的问题也
  • 韦东山嵌入式教程第四篇Linux驱动基础知识学习笔记(1)——Hello驱动程序

    驱动入门 Hello驱动程序 1 怎么写出一个驱动程序 确定主设备号 定义自己的file operations结构体 实现对应的open read write函数 填入file operations结构体 实现入口函数 安装驱动程序时 就会
  • 软件设计模式----访问者模式

    访问者模式 模式动机 对于系统中的某些对象 它们存储在同一个集合中 且具有不同的类型 而且对于该集合中的对象 可以接受一类称为访问者的对象来访问 而且不同的访问者其访问方式有所不同 访问者模式为解决这类问题而诞生 在实际使用时 对同一集合对
  • img固件修改_完整恢复玩客云官方固件,恢复迅雷下载和备份

    写在最前 刷了各种固件 最后都不是很满意 还是喜欢玩客云的下载和备份功能 就想着怎么恢复 先上一张照片 这是等待了2天后才写的这个教程 下载速度还可以 毕竟宽带才30M 文末再放些完成后的照片 在整个过程中 可能会遇到失败 需要冷静的再尝试
  • 基于Arnold变换的图像置乱-Matlab实现

    Arnold变换是俄国数学家VladimirI Arnold提出的一种变换 一幅M N的数字图像的二维Arnold 变换定义为 xn 1yn 1 1abab 1 xnyn mod N x n
  • java怎么实现分页分页代码_Java简单分页功能的实现代码

    网页内容多了我们就会想到分页功能 分页功能既能减少页面体积还能提升加载速度 因此我门就要学会实现简单的分页功能 那么我们现在就去看看Java简单分页功能的实现代码吧 不用根据改变SQL的形式去查询 直接查询所有的数据 根据页码自动显示数据
  • 实体与Dto(MODEL)之间的转换问题

    文章目录 实体与Dto MODEL 之间的转换问题 实体与Dto MODEL 之间的转换问题 在开发的过程中 实体之间相互赋值是很正常的事 但是我们一般的方法都通过set和get方法来进行的 如果要赋值的字段少那还行 但是需要赋值的字段超过
  • 实训笔记2.0

    3 22 CSRF漏洞介绍 CSRF Cross site request forgery 跨站请求伪造 也被称为 One Click Attack 或者 Session Riding 通常缩写为 CSRF 或者 XSRF 是一种对网站的恶
  • 一)Stable Diffusion使用教程:安装

    目前AI绘画最火的当属Midjorney和Stable Diffusion 但是由于Midjourney没有开源 因此我们主要分享下Stable Diffusion 后面有望补上Midjourney教程 本节主要讲解Stable Diffu
  • CSS知识点

    CSS text align 行内块元素才能居中显示 vertical align 解决图片底测有空白缝隙的问题 white space 强制一行内显示 overflow hidden 溢出隐藏 text overflow ellipsis
  • matlab图形绘制之——最小二乘拟合

    一 最小二乘法 记忆中是在高中阶段学习的最小二乘法 看一下最小二乘法的定义 二 matlab中的polyfit 在Matlab中 使用polyfit 函数对数据进行最小二乘法拟合 调用格式 p polyfit x y n 多项式曲线拟合 返
  • SpringBoot集成Validation参数校验

    1 依赖 SpringBoot在web启动器中已经包含validator包
  • HTML与H5

    HTML与H5 HTML 简介 HTML 注释 HTML 实例 HTML 标签 HTML 属性 head 标签 元信息标记 meta 标题 图标 加载资源 style body 标签 HTML 链接 HTML 图像 HTML 层标记 HTM
  • 渗透测试 面试笔试题

    Powered By 行云博客 https www xy586 top 原创文章 转载请附上原文出处链接和本声明 原文链接 https blog csdn net qq 41679358 article details 109019491
  • C语言:扫雷游戏简单实现

    目录 定义的一些变量 设计思路 为什么设计两个数组棋盘 为什么游戏是9 9但设计数组要设计11 11 初始化函数 为什么要把雷的棋盘初始化为0 打印函数 布置雷 排除雷 解释为什么先前初始化记数字棋盘时选择0和1 可以存在的优化 递归函数实
  • MediaPlayer.setAudioStreamType()方法过时用setAudioAttributes()方法替代

    在Android中创建MediaPlayer 有两种方法 第一种 MediaPlayer mp MediaPlayer create Context R raw xxx 或者 MediaPlayer mp MediaPlayer creat
  • cool-admin应对一个页面出现多个表格【element-ui解决】

    项目背景 在一个页面中引入三个表格的需求 这里以两个为例子好了 这里是失败的例子 cool admin中的cl表格可以实现出现这两个表格 这是data中return回来的 使用封装好的onload方法 调用server接口 实现从后端获取数