浮木云学习日志（13）---表格设计（3）

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

1、表格列设置

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

（1）纯文字

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

（2）图标文字

图标可以用来区别不同类型的数据。这种列设置可以展示从浮木云内置的图标库中选择的图标并为图标添加文案，同时支持设置图标的大小和颜色。在表格列设置中，图标、图片、标签、进度条文字包含“组合配置”和“过滤条件”。

在组合配置中设置的内容即使我没有给表格设置数据值，它也会默认显示在表格中。我们可以使用“组合配置”设置统一的内容，而通过设置“过滤条件”实现内容个性化展示。

（3）图片文字

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

（4）标签文字

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

不同标签展示效果如下：

（5）进度条文字

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

效果展示如下：

（6）图片

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

效果预览如下图：

（7）文件

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

效果预览如下：

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