@fantai/table
v0.0.17
Published
``` import { FtTable, FtTableColumn, FtTableStockColumn } from '@fantai/table';
Downloads
22
Readme
使用方式
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为不排序