@fantai/table v0.0.17

使用方式

import { FtTable, FtTableColumn, FtTableStockColumn } from '@fantai/table';

<ft-table :items="data">
    <ft-table-column title="名称" field="ZhongWenJianCheng">
        <template v-slot:header="{ column }">标题</template>
        <template v-slot:cell="{ column, item }">...</template>
    </ft-table-column>
</ft-table>

table 参数

items: any[] 表格数据

itemId: string | (item) => string 行的id来源，用作生成数据行的key，可以是字符串(取item中对应字段)，可以是通过一个function获取

itemAdaptor: string | (item) => object 行数据的适配器，可以将行数据做些修改后返回，只对当前显示数据调用该方法，比如在数据量大的列表中，table的items尽量不要频繁变化，避免表格整体重新渲染，这时设置itemAdaptor只对显示中的部分数据做处理

hideHeader: boolean 是否隐藏表头

fixedHeader: boolean 是否固定表头

columnWidth: string 所有列的统一列宽

simulateScrollX: boolean 是否横向使用模拟滚动，ios默认为true

table 监听事件

range: ({ current: number, count: number, start: number, end: number}) 表格纵向滚动时显示区域变化时触发，current 当前显示的第一条数据index，count 当前显示数据个数，start 数据缓存（渲染的数据）开始位置，end 数据缓存（渲染的数据）结束位置

part: (partItems: any[]) 表格纵向滚动时当前渲染数据变化时触发，partItems 当前渲染的部分数据

itemClick: (item: any, event: Event) 点击行数据时触发，item 点击的行数据

table-column 参数

id: string 列的id，用作生成列的key，默认等于field

title: string 默认显示的表头标题

field: string 默认显示的数据字段名

fixed: boolean 是否固定列

align: string | undefined 列数据的对齐方式，取值left|right|center

table-column 监听事件

cellClick: ({ item: any, column: any, event: Event }) 点击某格数据时触发

table-stock-column 参数

继承table-column所有参数

sortable: boolean 列是否可以排序

sortableField: string 排序的字段，默认等于列的field

updownStyle: boolean 是否自动设置涨跌样式

relateField: string 涨跌相关数据字段，根据对应字段数据值大于小于0判断涨跌，默认和field相同，指定compareField则和compareField值做比较

compareField: string 涨跌比较数据字段，比较当前值和对应字段的值大小判断涨跌('last'表示和上一次值比较)

type: string 数据格式化类型，取值 price|volume|ratio|text ，默认不设置按照price保留两位小数格式化，volume超过万/亿会加上单位，ratio按照百分数格式化后加上%，text则不做数据格式化按照文本输出

precision: number 格式化时保留小数位数

unit: string 数据按照指定单位自动格式化后添加单位，取值 ''|'K'|'M'|'B'|'K/M'|'K/M/B'|'万'|'亿'|'万/亿'|'%'

useDefault: string | boolean 是否使用默认值，默认显示--，字符串类型表示需要显示的默认值

isAutoPrec: boolean 是否自动进行精度控制，true时 对于不到单位转换的情况时直接取整

isAbs: boolean 是否显示数字绝对值

withSign: boolean 是否显示正负符号

updown: number 涨跌平设置，大于0上涨（添加class up）,小于0下跌（添加class down）

table-stock-column 监听事件

sort: ({ field: string, desc: boolean, event: Event }) 点击排序表头触发的排序事件，field对应字段，desc排序方向true为降序，false为升序，undefined为不排序