列表页中,通常存在各种各样的样式控制,例如字段宽度需要可调、字段的颜色根据内容变化等,那么我们接下来介绍下字段的样式控制的内容以及对应的效果。
1、字段样式控制配置位置
进入列表页的 数据配置界面,每个字段可以有独立的配置效果
![](https://img-blog.csdnimg.cn/img_convert/53adea09c2bde6dc64fe6ef7333f8bd0.png)
2、固定列配置,效果与配置方式如下:
如果字段过多,希望字段在横向拖动的时候,保持有序列一直展示,如下图所示:
![](https://img-blog.csdnimg.cn/img_convert/f163ff6c0c8354c16b6ae9521e750e78.png)
配置方式:
![](https://img-blog.csdnimg.cn/img_convert/614f2ccfe832b44ddd654b22922eb386.png)
3、字段颜色控制
在日常的项目中,常常对于不同状态的数据,进行 特殊 警示,配置效果与方式如下:
配置方式,在列表页的对应字段上,点击显示配置的 按钮
![](https://img-blog.csdnimg.cn/img_convert/459485e743f4184ed562daa3790752a1.png)
进入配置界面,可以根据具体的内容 进行 背景、文字颜色、文字转换等方式 配置。
![](https://img-blog.csdnimg.cn/img_convert/e210a483264d61d377b1fee4e261531f.png)
4、字段宽度:
下面我们来看看效果与配置方式
进入列表页的字段配置界面,
![](https://img-blog.csdnimg.cn/img_convert/fdfd1852562b13b6cd63b92fbf0c0306.png)
配置对应字段宽度
![](https://img-blog.csdnimg.cn/img_convert/e6beb76a7298643efb4fba517601d303.png)
5、手动控制的升降序按钮
效果如图所示:
![](https://img-blog.csdnimg.cn/img_convert/6d0503f8166d913f6c9509ed6e281c8f.png)
设置方式:
![](https://img-blog.csdnimg.cn/img_convert/d48d7099dcba5a2b96703243fba6874e.png)
6、字段点击复制按钮:
![](https://img-blog.csdnimg.cn/img_convert/17b21874d11e4bdb69c93d7250bb2be0.png)
配置方式:
![](https://img-blog.csdnimg.cn/img_convert/1a6bf6764a304c1b1eede28322d23ad6.png)
在线配置地址:https://frame.bctools.cn/