数据可视化设计，滚动表格组件，支持滚动显示、排名展示和多样化样式配置。组件可实现进度条、标签、图片等列类型，并允许自定义单元格内容和格式。
·
触达云屏，基础表格组件：
介绍：
- 支持数据滚动展示
- 支持排名显示
- 支持样式配置
- 支持显示进度条列，标签列，图片列 等等
- 支持自定义单元格内容格式
- 支持数据驱动单元格、行背景变色
- 支持数据驱动单元格、行字体变色
1. 添加组件
2. 配置表格列
表格列配置，支持表单方式添加、支持代码方式配置。
V3.7.0 开始，支持配置数据后，自动生成表格列，如果不需要自动，可以关闭自动生成(表格列设置中关闭)。
以下为表格列的代码模式下的示例：
[
{
"label": "地区",
"prop": "city",
"width": "90",
"sort": 0,
"textAlign": "right",
"hide": false,
"type": "tag",
"_ext": {
"status": "success",
"effect": "linght"
},
"$cellEdit": false,
"$index": 0
},
{
"label": "手游",
"prop": "mg",
"sort": 10,
"textAlign": "center",
"hide": false,
"type": "progress",
"_ext": {
"strokeWidth": 12,
"colors": [
{
"color": "#f56c6c",
"percentage": 1
},
{
"color": "#e6a23c",
"percentage": 20
},
{
"color": "#5cb87a",
"percentage": 40
},
{
"color": "#1989fa",
"percentage": 60
},
{
"color": "#6f7ad3",
"percentage": 100
}
]
},
"width": "",
"$cellEdit": false,
"$index": 1
},
{
"label": "端游",
"prop": "cg",
"width": "80",
"sort": 20,
"textAlign": "left",
"hide": false,
"$cellEdit": false,
"$index": 2
}
]
3. 配置数据
切换到数据配置，配置数据来源，关于不同数据类型的区别，请参考文档：组件通用配置说明
默认开启 自动根据数据列 生成表格列，如果不需要自动生成，可以关闭自动生成。
使用数据转换函数自定义转换数据格式时，数据格式如下：
数据中的列名和表格列配置中的列名保持一致；
单元格内容支持HTML富文本，可以灵活的实现个性化样式；
[
{
"city": "深圳",
"mg": 50,
"cg": 4116
},
{
"city": "上海",
"mg": 10,
"cg": 5495
},
{
"city": "广州",
"mg": 60,
"cg": 4572
}
]
参考【组件配置说明】
4. 配置表格样式
(配置项持续增加，以设计器内实际为准)
| 配置项 | 子项 | 示例值 | 说明 |
|---|---|---|---|
| 开启滚动 | 开启后，表格数据自动滚动 | ||
| 滚动时间 | 滚动间隔时长，单位毫秒，如设置为2000，表示间隔2秒滚动一次 | ||
| 滚动行数 | 设置一次滚动几行，一般设置为1 ，逐行滚动。如不设置，则按照表格设置中的显示行数滚动 | ||
| 追加模式 | 开启追加模式后，加载到的新数据会以追加的方式添加到表格中。表格中设置的显示行数作为最大行数，自动清除旧数据。 | ||
| 显示提示框 | 开启后，鼠标移动到表格列中显示提示窗口 | ||
| 开启排名 | 开启后显示排名列 | ||
| 排名设置 | 排名列名 | 排名列的表头显示内容 | |
| 排名列宽 | |||
| 排名形状 | 目前支持圆形和方形，可以在数据转换函数中扩展数据列，实现个性化样式设置 | ||
| 字体大小 | |||
| 字体名称 | |||
| 字体加粗 | |||
| 字体颜色 | |||
| 开启显隐 | 开启后，显示表格列显隐的操作按钮，点击可以选择要显示或隐藏的列 | ||
| 全部数据 | 开启后，显示全部数据的操作按钮，点击可以查看数据 | ||
| 表头设置 | 显示 | 开启后显示表头 | |
| 背景颜色 | 表头的背景颜色 | ||
| 字体大小 | |||
| 字体名称 | |||
| 字体加粗 | |||
| 字体颜色 | |||
| 表格设置 | 显示行数 | ||
| 字体大小 | |||
| 字体名称 | |||
| 字体加粗 | |||
| 字体颜色 | |||
| 奇行颜色 | |||
| 偶行颜色 | |||
| 无数据提示 | 无数据时的提示语 | ||
| 表格列设置 | 自动生成 | 默认开启，开启后选择数据集后，自动根据数据产生数据列，建议在首次生成后，关闭自动生成 | |
| 表格列配置 | 表格列的字体、宽度等配置，通过编辑表格列表单中配置。个性化样式通过代码模式配置，参考后面的说明。 |
表单方式添加/编辑表格列：
5. 配置事件
* 点击事件
表格行点击事件，点击后可以实现弹窗、跳转、联动其他图表等操作。
({row,rowIndex,cell,cellIndex}, items, visual) => {
if(cell.prop === 'op1'){
//新窗口打开历史记录
visual.openAppWindow({"url":"http://doc.hezyun.cn?_id=" + row.id});
}else if(cell.prop === 'op2'){
//弹窗打开报警记录
visual.openAppDialog({"url":"http://doc.hezyun.cn?_id=" + row.id,"fullscreen":true});
}
}
参数说明：
data = {
row:{ //行数据对象，包含当前行所有列的值，可以自由获取需要的属性值
},
rowIndex:0, //行索引
cell:{ //单元格对象
"label": "手游", //列标题
"prop": "mg", //列字段名
"type": "progress", //类型
"$index": 1 //单元格索引
},
cellIndex:1
}
visual = 当前组件对象
* 提示格式化
鼠标移动到单元格上时的提示内容，默认为单元格内容。
(rowdata,column) =>{
return "提示内容：" + rowdata[column.prop];
}
参数说明：
//行数据对象，包含当前行所有列的值，可以自由获取需要的属性值
rowdata= {
}
//列字段信息，根据不同的列可以返回不同的提示内容
column= {
$index: 0
label: "地区"
prop: "city"
width: ""
}
6.个性化设置：
1. 指定数据行 排名编号背景颜色
数据行中 增加 indexColor 属性，配置指定颜色
数据为数据集、即时推送 等动态数据时，可以通过数据转换函数 增加属性配置。
{
"city": "深圳",
"mg": 17968,
"cg": 4116,
"indexColor": "red"
}
下面是一个将所有数据行的排名背景色设置为透明的（数据转换函数）示例：
(resdata,visual)=>{
//resdata 说明： 静态数据时为原数据; 数据集 时为完整的响应结果，通过resdata.data 获取数据
//visual 说明：当前组件对象
//编写自定义数据转换逻辑
let data = visual.$preData || [];//获取内置转换处理后的表格数据
data.forEach((item,index)=>{
item.indexColor = "rgba(0,0,0,0)";//设置所有数据行的排名背景色为透明色
});
//返回图表所需的数据
return data
}
2. 设置列显示为 标签
如下图，产品名称 这一列，显示为标签，并使用背景色区分。
在表格列设置中，设置显示类型 type=tag ，同时增加 _ext 配置，设置标签样式
{
"label": "产品名称",
"prop": "city",
"type": "tag",
"_ext": {
"status": "success",
"effect": "dark",
"colors": [
{
"color": "rgba(255, 120, 0, 0.5)",
"value": "产品1"
},
{
"color": "rgba(255, 215, 0, 0.5)",
"value": "产品2"
},
{
"color": "rgba(30, 144, 255, 0.5)",
"value": "产品3"
}
]
}
}
| 名称 | 说明 |
|---|---|
| status | 可选： success/info/warning/danger |
| effect | 主题，可选：dark / light / plain |
| size | 大小，可选：medium、small、mini |
| color | 指定背景颜色 |
| colors | 指定背景颜色，支持根据单元格内容动态显示颜色。当前列的数据为数字时，按照数值范围匹配颜色（>=指定值）；当前列的数据为字符串时，按照字符串匹配颜色。 |
3. 设置列显示为 进度条
如下图，进度 这一列，显示为进度条。
在表格列设置中，设置显示类型 type=progress，同时增加 _ext 配置，设置标签样式
{
"label": "进度",
"prop": "mg",
"type": "progress",
"_ext": {
"strokeWidth": 12,
"colors": [
{
"color": "#f56c6c",
"percentage": 1
},
{
"color": "#e6a23c",
"percentage": 20
},
{
"color": "#5cb87a",
"percentage": 40
},
{
"color": "#1989fa",
"percentage": 60
},
{
"color": "#6f7ad3",
"percentage": 100
}
]
},
"width": "",
"$cellEdit": false,
"$index": 1
}
| 名称 | 说明 |
|---|---|
| strokeWidth | 进度条宽度：默认 6 |
| color | 进度条颜色：指定单一颜色 |
| colors | 进度条颜色：对象数组，指定不同百分比颜色，示例：color设置为 red ， percentage 设置为20 ，表示<20 颜色为red |
| textInside | 百分比文本显示到进度条内部 ，true/false，默认false |
| showText | 是否显示百分比文本，true/false，默认true |
自定义进度条样式：
使用富文本，编写 css class 。
通过ID（item+组件id ）+ 要设置的子class
示例：设置指定表格中，进度条百分比文本的字体颜色
<style>
#itemd28ae9bd-1c43-489d-988c-45b9817d5927 .el-progress .el-progress__text{
color:#fff
}
</style>
4. 动态设置单元格/表格行背景色
如下图，已生产 这一列，不同数值 显示不同的背景色 进行区分。
在表格列设置中，设置列的 bgColors 配置
{
"label": "已生产",
"prop": "ysc",
"width": "80",
"sort": 20,
"textAlign": "right",
"hide": false,
"bgColors": [
{
"color": "rgba(255, 120, 0, 0.5)",
"value": 7000
},
{
"color": "rgba(255, 215, 0, 0.5)",
"value": 8000
},
{
"color": "rgba(30, 144, 255, 0.5)",
"value": 9000
},
{
"color": "rgba(48, 247, 48, 0.5)",
"value": 12000
}
],
"$cellEdit": false,
"$index": 2
}
需要以其他列数值驱动当前列颜色时，在列配置中，bgColors 参考以下配置:
{
"label": "已生产",
"prop": "ysc",
"width": "80",
"sort": 20,
"textAlign": "right",
"hide": false,
"bgColors": {
"prop": "ysc",
"t": "r",
"colors": [{
"color": "rgba(255, 120, 0, 0.5)",
"value": 7000
},
{
"color": "rgba(255, 215, 0, 0.5)",
"value": 8000
},
{
"color": "rgba(30, 144, 255, 0.5)",
"value": 9000
},
{
"color": "rgba(48, 247, 48, 0.5)",
"value": 12000
}
]
},
"$cellEdit": false,
"$index": 2
}
| 名称 | 说明 |
|---|---|
| prop | 不配置，默认按当前列的数值驱动颜色变化，可以配置其他指定列的数据值来驱动当前列单元格颜色 |
| t | t 不设置，或设置为c ，驱动单元格背景变色；t 设置为 r ，可以驱动行背景色变色 |
| colors | 指定多组数值和颜色，支持根据单元格内容动态显示颜色。指定列的数据为数字时，按照数值范围匹配颜色（>=指定值）；当前列的数据为字符串时，按照字符串匹配颜色。 |
5. 动态设置单元格字体颜色
如下图，已生产 这一列，不同数值显示不同的颜色区分。
在表格列设置中，设置列的 fontColors 配置
单元格字体颜色和 单元格背景颜色，支持同时设置。
{
"label": "已生产",
"prop": "ysc",
"width": "80",
"sort": 20,
"textAlign": "right",
"hide": false,
"fontColors": [
{
"color": "rgba(255, 120, 0, 0.5)",
"value": 1
},
{
"color": "rgba(255, 215, 0, 0.5)",
"value": 50
},
{
"color": "rgba(30, 144, 255, 0.5)",
"value": 80
},
{
"color": "rgba(48, 247, 48, 0.5)",
"value": 100
}
],
"$cellEdit": false,
"$index": 2
}
需要驱动整行字体的颜色、以其他列的数值驱动当前列字体颜色时，fontColors 参考 bgColors 的配置说明。
| 名称 | 说明 |
|---|---|
| prop | 不配置，默认按当前列的数值驱动颜色变化，可以配置其他指定列的数据值来驱动当前列字体颜色 |
| t | t 不设置，或设置为c ，驱动单元格字体变色；t 设置为 r ，可以驱动行字体变色 |
| colors | 指定多组数值和颜色，支持根据单元格内容动态显示颜色。指定列的数据为数字时，按照数值范围匹配颜色（>=指定值）；当前列的数据为字符串时，按照字符串匹配颜色。 |
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
23
0- 0
已为社区贡献6条内容
所有评论(0)