参数
| 参数名 | 说明 | 默认值 |
|---|
| headerHeight | 表头高度 | 40 |
| lineHeight | 表格行高 | 40 |
| offsetTop | 设置表头吸顶的距顶高度 | ios：76，android：56 |
| columns | 表格列配置 | [] |
| data | 表格数据（每行必须有id字段） | [] |
| pagination | 是否显示分页 | true |
| page | 分页当前页码 | 1 |
| total | 总条数 | 0 |
| pageSize | 每页条数 | 10 |
| index | 是否显示序号 |
| indexWidth | 序号列宽度 | 40 |
| stripe | 是否启用斑马纹背景 | true |
| border | 是否显示边框 | true |
| storageKey | 用于列显示个性设置本地数据保存的key |
| headerFormatter | 表头jsx渲染函数，字段作为key |
| formatter | 单元格jsx渲染函数，字段作为key |
| highlightRow | 高亮显示行函数，需返回一个颜色值 |
事件
| 事件名 | 说明 |
|---|
| sort | 排序事件，点击表头触发，返回排序类型（升序、降序）和排序字段，数据格式：{key: 'name', sortType: 'asc'} |
| change-page | 翻页事件，改变页码触发，返回页码 |
| cell-click | 单元格点击事件，参数（行数据、列配置、索引） |
| sticky-scroll | sticky组件scroll事件，参数（滚动距离、是否吸顶） |
方法
| 方法名 | 说明 |
|---|
| setTableHeight | 设置表格高度，该方法根据表格组件的父元素高度自动计算表格的高度，组件会在mounted时调用该方法，如果父元素在第一次渲染后改变高度，可在组件外部自行调用该方法重新计算高度。调用是可传入高度作为参数，不传参数则获取父元素的高度用于计算 |
| clearScroll | 清除滚动 |
| setSort | 设置默认排序字段 |
| openHorizontal | 开启横屏模式 |
| openSettings | 打开个性设置 |
用法
<template>
<div class="demo-tabbar">
<ks-table
:columns="columns"
:data="data"
:page="page"
:pageSize="100"
:total="1000"
@sort="onSort"
@change-page="onChangePage"
></ks-table>
</div>
</template>
<script>
import KsTable from '../components/ks-table/index'
export default {
name: "table",
components: {KsTable},
data() {
return {
page: 1,
columns: [
{title: '姓名', key: 'name', width: 100, sort: true},
{title: '年龄', key: 'age', width: 100, sort: true},
{title: '手机', key: 'phone', width: 100, sort: true},
{title: '姓名', key: 'name1', width: 100, sort: true},
{title: '年龄', key: 'age1', width: 100, sort: true},
{title: '手机', key: 'phone1', width: 100, sort: true}
],
data: [
{id: '1', name: 'tom', age: 18, phone: 13211111111},
{id: '2', name: 'jack', age: 20, phone: 13211111112},
{id: '3', name: 'jojo', age: 22, phone: 13211111113},
{id: '4', name: 'tom', age: 18, phone: 13211111111},
{id: '5', name: 'jack', age: 20, phone: 13211111112},
{id: '6', name: 'jojo', age: 22, phone: 13211111113}
]
}
},
methods: {
onSort (e) {
console.log(e)
},
onChangePage (e) {
console.log(e)
this.page = e
}
}
}
</script>
<style lang="less" scoped>
.demo-tabbar {
height: 300px;
}
</style>