首页 > 其他分享 >浮木云学习日志(13)---表格设计

浮木云学习日志(13)---表格设计

时间:2024-04-02 14:12:29浏览次数:20  
标签:文字 13 表格 进度条 --- 过滤 浮木云 设置 图标


在之前的系列文章中已经介绍了浮木云平台的许多使用技巧,本次我将结合下面已经搭建好的表格示例来详细介绍“高级表格”组件。浮木云平台的“高级表格”组件可以通过表格列设置设计多样的表格,展示更丰富的内容。大家也可以进入他们的官网https://www.fumucloud.com/自己动手操作一下。

1、表格列设置
在使用中我发现表格列设置主要包括了纯文字、图标文字、图片文字、标签文字、进度条文字、图片以及文件七个不同的类型。

(1)纯文字
纯文字是只有文字的表格列类型。在纯文字的表格列设置中仅包含“过滤条件”。我们可以手动输入文字内容,也可以设置“过滤条件”从而通过不同的值展示不同的过滤文案。在“过滤条件”中,我们可以通过设置不同的“过滤值”、“过滤文案”、“过滤字体”以及“过滤颜色”来实现不同过滤文案的展示。当我在表格数据设置中输入1、2、3则会显示与它们相对应的过滤文案,如果我输入过滤值之外的内容,则会显示我输入的内容本身。


(2)图标文字
图标可以用来区别不同类型的数据。这种列设置可以展示从浮木云内置的图标库中选择的图标并为图标添加文案,同时支持设置图标的大小和颜色。在表格列设置中,图标、图片、标签、进度条文字包含“组合配置”和“过滤条件”。
在组合配置中设置的内容即使我没有给表格设置数据值,它也会默认显示在表格中。我们可以使用“组合配置”设置统一的内容,而通过设置“过滤条件”实现内容个性化展示。


(3)图片文字
这一种列设置与图标文字的设置与显示相同。而我发现它与图标文字不同的是,这里的图片需要自己上传,同时图标文字是设置字体大小等比例缩放而图片文字可以设置图片的高度和宽度去自定义图片的大小。

(4)标签文字
这种列设置方法与图标文字、图片文字设置相同。标签的类型一共有“默认”、“信息”、“成功”、“警告”以及“错误”五种类型。这五种类型的标签颜色不一样所代表的意义也不一样,根据需要的内容选择不同的标签。

不同标签展示效果如下:

(5)进度条文字
这种列类型可以设置进度条的高度,并且通过设置进度条的最大最小值来控制进度条的比例。给进度条的最小值设置为0,最大值设置为100,当我在表格数据中设置进度条的值为90时,就有90%的进度条会高亮显示同时在进度条后显示“90%”的字样。

效果展示如下:

(6)图片
这个列类型是可以允许往表格里面传输图片。我们可以在表格列设置中设置图片的大小。设置完成后,可以在“表格数据设置”中上传图片。

效果预览如下图:

(7)文件
这个列类型允许往表格中传输文件。我们可以在表格列设置中设置文件是否可以预览及下载。设置完成后,在“表格数据设置”中上传文件。当开启预览模式,点击眼睛样式的图标可以对文件进行预览。点击下载样式的图标可以下载文件。

效果预览如下:

好了,关于如何利用浮木云平台设计一个多样的表格设计就先介绍到这里,希望对你们有所帮助。如果感兴趣,大家也可以去浮木云平台自己尝试摸索一下表格的多样设置!

标签:文字,13,表格,进度条,---,过滤,浮木云,设置,图标
From: https://www.cnblogs.com/shouqian/p/18110451

相关文章

  • pta 1013 数素数
    013数素数分数20全屏浏览切换布局作者 CHEN,Yue单位 浙江大学令 Pi​ 表示第 i 个素数。现任给两个正整数 M≤N≤104,请输出 PM​ 到 PN​ 的所有素数。输入格式:输入在一行中给出 M 和 N,其间以空格分隔。输出格式:输出从 PM​ 到 PN​ 的所有素......
  • 35---USB PHY---ULPI & UTMI+ & HSIC
    视频链接USBPHY硬件电路设计---ULPI&UTMI+&HSIC01_哔哩哔哩_bilibiliUSBPHY---ULPI&UTMI+&HSIC1、USBPHY基本介绍芯片厂商开发了一些USBPHY芯片,可以把DP、DM上的差模信号转成共模信号。USBPHY负责最底层的信号转换,作用类似于网口的PHY。USB信号传输前,需要......
  • extern 关键字------非原创
    前面总结了static关键字,下面先说说static和extern能同时使用吗?答案是不能。 extern修饰全局变量和函数,被修饰的变量和函数可以在别的文件里使用。static修饰的变量和函数作用范围仅限于定义它的文件内部。 static要求去除符号表名称,extern要求通过符号名称链接,他俩先天就矛......
  • C语言基础-标准输入输出
    标准库实现了简单文本的输入输出模式。以下的示例在使用时都需要先包含标准输入输出头文件stdio.h#include<stdio.h>输入getchar函数intgetchar(void);从标准输入(一般为键盘)中一次获取一个字符调用时,返回输入的字符遇到文件结尾时返回EOFEOF也定义在stdio.h中,其......
  • MySQL-linux安装-万能RPM法
    一、MySQL的Linux版安装1、CentOS7下检查MySQL依赖1.检查/tmp临时目录权限(必不可少)由于mysql安装过程中,会通过mysql用户在/tmp目录下新建tmp_db文件,所以请给/tmp较大的权限。执行:chmod-R777/tmp2.安装前,检查依赖rpm-qa|greplibaiorpm-qa|grepnet-tools......
  • APP自动化测试-Appium元素定位之元素等待
    一、什么是元素等待元素等待的意义在Appium自动化测试中,元素等待是一个重要的环节。当脚本执行速度较快,而页面元素尚未加载完成时,就会导致脚本无法定位到元素,从而使执行失败。因此需要设置元素等待,从而增强脚本的健壮性,提高执行效率。元素等待的主要目的是确保在执行操作......
  • golang中GORM使用 many2many 多对多关联查询-详细案例
    表结构和数据user表CREATETABLE`user`(`id`bigint(20)NOTNULL,`user_key`bigint(20)NOTNULL,`account`char(32)NOTNULL)ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;为了测试将user_key和id写入同样的值数据:+----+----------+---------+|id|user_k......
  • 前端学习-UI框架学习-Bootstrap5-015-列表组
    菜鸟教程链接列表组+active激活+disabled禁用要创建列表组,可以在元素上添加.list-group类,在元素上添加.list-group-item类:<template><divclass="containermt-3"><h2>列表组</h2><p>列表组+active激活+disabled禁用</p><......
  • leedcode-3 的幂
    自己写的,耗时很长classSolution:defisPowerOfThree(self,n:int)->bool:#如果n为负数,则不是3的幂ifn<0:returnFalse#如果n为1,则是3的幂ifn==1:returnTrue#如果......
  • Vue2 和 Vue3 中的 v-model 的区别#记录
    vue3对v-model的语法进行了改动。vue2中有两种方式实现数据的双向绑定(组件与外部数据的双向绑定),一种是使用v-model,另一种是使用v-bind.sync修饰符。vue2中的v-model,主要是进行value属性的绑定和input事件的派发。<ChildComponentv-model="pageTitle"/>//等价于<Child......