table
基础用法
注入 data 对象数组后，在 x-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。 可以使用 width 属性来定义列宽。
| id | 日期 | 用户 | 地址 |
|---|---|---|---|
1 | 2016-05-02 | xiaoming | No. 189, Grove St, Los Angeles |
2 | 2017-05-04 | xiaohong | No. 189, Grove St, Los Angeles |
3 | 2018-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |
4 | 2019-05-01 | hello | No. 189, Grove St, Los Angeles |
5 | 2025-05-01 | ok | No. 189, Grove St, Los Angeles |
带斑马纹
给 x-table 组件添加 striped 属性即可开启斑马纹。
| id | 日期 | 用户 | 地址 |
|---|---|---|---|
1 | 2016-05-02 | xiaoming | No. 189, Grove St, Los Angeles |
2 | 2017-05-04 | xiaohong | No. 189, Grove St, Los Angeles |
3 | 2018-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |
4 | 2019-05-01 | hello | No. 189, Grove St, Los Angeles |
5 | 2025-05-01 | ok | No. 189, Grove St, Los Angeles |
带边框表格
给 x-table 组件添加 border 属性即可开启带边框表格。
| id | 日期 | 用户 | 地址 |
|---|---|---|---|
1 | 2016-05-02 | xiaoming | No. 189, Grove St, Los Angeles |
2 | 2017-05-04 | xiaohong | No. 189, Grove St, Los Angeles |
3 | 2018-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |
4 | 2019-05-01 | hello | No. 189, Grove St, Los Angeles |
5 | 2025-05-01 | ok | No. 189, Grove St, Los Angeles |
固定表头
给 x-table 组件添加 height 属性即可开启固定表头。
| id | 日期 | 用户 | 地址 |
|---|---|---|---|
1 | 2016-05-02 | xiaoming | No. 189, Grove St, Los Angeles |
2 | 2017-05-04 | xiaohong | No. 189, Grove St, Los Angeles |
3 | 2018-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |
4 | 2019-05-01 | hello | No. 189, Grove St, Los Angeles |
5 | 2025-05-01 | ok | No. 189, Grove St, Los Angeles |
6 | 2026-05-01 | ok | No. 189, Grove St, Los Angeles |
7 | 2027-05-01 | ok | No. 189, Grove St, Los Angeles |
8 | 2028-05-01 | ok | No. 189, Grove St, Los Angeles |
9 | 2029-05-01 | ok | No. 189, Grove St, Los Angeles |
多选
手动添加一个 x-column，设 type 属性为 selection 即可开启多选。selectable 属性是一个函数，用来判断当前行是否可以被选中。
| id | 日期 | 用户 | 地址 | |
|---|---|---|---|---|
1 | 2016-05-02 | xiaoming | No. 189, Grove St, Los Angeles | |
2 | 2017-05-04 | xiaohong | No. 189, Grove St, Los Angeles | |
3 | 2018-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles | |
4 | 2019-05-01 | hello | No. 189, Grove St, Los Angeles | |
5 | 2025-05-01 | ok | No. 189, Grove St, Los Angeles |
树形数据
支持树类型的数据的显示。 当 data 属性数据中的某一项 中包含 children 字段时，被视为树形数据。
| id | 日期 | 用户 | 地址 |
|---|---|---|---|
1 | 2016-05-02 | wangxiaohu | No. 189, Grove St, Los Angeles |
2 | 2016-05-04 | wangxiaohu | No. 189, Grove St, Los Angeles |
3 | 2016-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |
可选择的树形数据
父节点和子节点的选择状态将与子节点的选择状态相关联， 也就是说，当选择父节点时，将选择其所有子节点。
| id | 日期 | 用户 | 地址 | |
|---|---|---|---|---|
1 | 2016-05-02 | wangxiaohu | No. 189, Grove St, Los Angeles | |
2 | 2016-05-04 | wangxiaohu | No. 189, Grove St, Los Angeles | |
3 | 2016-05-01 | wangxiaohu | No. 189, Grove St, Los Angeles |