§ Table 表格
§ fox-table 表格组件
§ HTML
§ 表格(数组)
<fox-group no="1" title="表格(数组)">
<fox-table :header="m_tableHeader" :content="tableData" @select="rowClick" v-model="selectedRows" select-policy="single"></fox-table>
</fox-group>
1
2
3
2
3
§ 表格(JSON)
<fox-group no="2" title="表格(JSON)">
<fox-table :header="m_tableHeader2" :content="tableData2" @select="rowClick" v-model="selectedRows2"
select-policy="multi"></fox-table>
</fox-group>
1
2
3
4
2
3
4
§ 表格(inner)
<fox-group no="3" title="表格(inner)">
<fox-inner-table :header="m_tableHeader3" :content="tableData3" @select="rowClick"
v-model="selectedRows3" select-policy="multi"></fox-inner-table>
</fox-group>
1
2
3
4
2
3
4
§ API
§ Props
组件支持以下属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 选中的行的索引数组 | Array | — |
| header | 表格头数据 | Array | — |
| has-header | 是否显示表格头 | Boolean | true |
| content | 表格体数据 | Array | — |
| content-height | 内容高度 | String/Number | — |
| offset-top | 内容滚动接近头部偏差 | Number | 10 |
| offset-bottom | 内容滚动接近底部偏差 | Number | 10 |
| scroll-position | 滚动位置(top,bottom) | String | — |
| scroll-bottom | 是否滚动到最底端 | Boolean | false |
| select-policy | 选择方式 | String | — |
| selected-rows | 已选择的行 | Array | — |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否可用 | Boolean | false |
| span | 是否跨列 | Number/String | all |
§ Event
支持以下事件:
| 事件 | 说明 |
|---|---|
| cellclick | 选中某个单元格事件 |
| select | 选中行事件 |
| scrolltop | 滑动到底部触发事件 |
| scrollbottom | 未滑动到底部触发事件 |