@kyfe/kstable

参数

参数名	说明	默认值
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: [phone]},
        {id: '2', name: 'jack', age: 20, phone: [phone]},
        {id: '3', name: 'jojo', age: 22, phone: [phone]},
        {id: '4', name: 'tom', age: 18, phone: [phone]},
        {id: '5', name: 'jack', age: 20, phone: [phone]},
        {id: '6', name: 'jojo', age: 22, phone: [phone]}
      ]
    }
  },
  methods: {
    onSort (e) {
      console.log(e)
    },
    onChangePage (e) {
      console.log(e)
      this.page = e
    }
  }
}
</script>

<style lang="less" scoped>
.demo-tabbar {
  height: 300px;
}
</style>