表格组件实现合并列显示

最近更新时间:2024-03-15 11:06:31

我的收藏

业务场景

在数据表格应用中,有时候需要将两个相关字段拼接在一起显示,例如有一个省市区字段 A 和一个详细地址字段 B,需要把这个两个字段拼接起来显示完整的地址信息格式:A+B,同时需要将多余的列进行删除或者隐藏。




实现思路

在数据表格中新建一列用来展示拼接字段,可以将需要拼接的字段值采取表达式的方式进行拼接,然后隐藏多余的字段,效果展示。




实施方案

1. 在编辑器中使用数据表格组件,并进行相关配置。
1.1 在编辑器右侧区域选择数据表格组件。



1.2 对数据表格进行内容配置。



2. 在表格组件中新建一列用来展示拼接字段。
2.1 新增表格列用户地址,并将列展示内容设置为自定义内容,则该列会形成插槽,允许放入其他组件。



2.2 表格列用户地址添加文本组件,文本组件将用于拼接后的列值展示。



2.3 文本组件的内容用表达式模式绑定拼接列值,这里我们将表格列详细地址省市区的值进行拼接,其中 $w.table1.cell_ltmix395i.record.pcd 表示字段“省市区”的值,$w.table1.cell_ltmix395i.record.address 表示字段详细地址的值。



3. 隐藏多余的表格列,这里以列详细地址省市区为示例,只保留最新的表格列用户地址
3.1 设置字段查询范围为自定义,自定义查询字段弹窗里勾选要查询的相关字段



3.2 删除列省市区详细地址



4. 表格合并列之后的展示效果。




注意事项

注意:
因为数据表格组件的列显示会根据当前的表格列设置进行相关字段过滤查询,所以编辑器右侧属性面板列管理不能直接删除多余的表格列,要先设置表格的字段查询范围,否则会造成该删除列字段的缺失,例如删除列详细地址,那么其字段值将为 undefined