参数

参数名 | 说明 | 默认值 -----------|--------|-------- 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 | 打开个性设置

slot

--------|------ | nodata | 暂无数据的插槽 |

用法

<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>