07-“普通表格”属性说明 - CloudKanBan 相关

# **1.概述**
为了实现更好的用户体验，CloudKanBan表格组件支持渲染html标签，从而实现自定义样式功能
# **2.实现步骤**
1.拖拽设计器左侧表格组件
2.点击数据源，设置数据源json（或直接绑定）
# **3.属性设置**
1. 若数据源表头需要换行，参考返回格式为
```json
[
    {
        "<div style=' line-height: 20px;height: 20px;'>aaa</div><div style='line-height: 20px;height: 20px;'>bbb</div>": 335,
        "x": "A"
    },
    {
        "<div style=' line-height: 20px;height: 20px;'>aaa</div><div style='line-height: 20px;height: 20px;'>bbb</div>": 310,
        "x": "B"
    },
    {
        "<div style=' line-height: 20px;height: 20px;'>aaa</div><div style='line-height: 20px;height: 20px;'>bbb</div>": 234,
        "x": "C"
    },
    {
        "<div style=' line-height: 20px;height: 20px;'>aaa</div><div style='line-height: 20px;height: 20px;'>bbb</div>": 135,
        "x": "D"
    },
    {
        "<div style=' line-height: 20px;height: 20px;'>aaa</div><div style='line-height: 20px;height: 20px;'>bbb</div>": 548,
        "x": "E"
    }
]
```
效果如下
![](/media//202409/2024-09-02_134915.png)
2. 若数据源表体需要换行，参考返回格式为
```json
[
    {
        "x": 335,
        "Y": '<div style="white-space: normal;line-height: 20px;word-wrap: break-word;">这里是换行的内容</div>'
    }
]
```