vue-analysis-table
表格组件
默认已表格形式展示数据,支持切换到图分析模式。
部署
使用内网源:npm set registry http://npm.vivo.com.cn/
- 修改版本 (TODO 自动化)
yarn build
npm publish
参数说明
除了 data columns,其它参数都可缺省
分为以下三部分:
1. 组件参数
Property | Description | Type | Default |
---|---|---|---|
data | 表格数据 | - | - |
columns | 表头设置 | Array<TableColumn> |
- |
defaultType | 默认展示模式 | DISPLAY_TYPE |
DISPLAY_TYPE.表 |
showSwitch | 是否显示切换图/表按钮 | boolean | true |
title | 表格 title | string | '详情列表' |
enum DISPLAY_TYPE {
'表' = 'table',
'图' = 'chart',
}
export interface TableColumn {
key: string;
name?: string;
isNumber?: boolean; // 数字类型会靠右
_show?: boolean;
width?: string;
overflowTooltip?: boolean;
fixed?: 'right' | 'left' | true; // 出现横向滚动条的时候是否固定
}
2. 表相关参数
常用的参数:
defaultSortKey
defaultSortDirection
expandKeys
filterFields
showOverflowTooltip
Property | Description | Type | Default |
---|---|---|---|
defaultSortKey | 排序字段 | string | '' |
defaultSortDirection | 排序方向 | 'ascend' or 'descend' | 'descend' |
expandKeys | 需要支持展开的字段 | ExpandColumnSettings |
{} |
filterFields | 筛选框的字段 | Array<string | FilterConfig> |
[] |
showOverflowTooltip | 超过一行不换行,而是用省略号显示 | boolean | false |
showSeniorFilter | 是否显示高级筛选 | boolean | true |
showSearch | 是否显示搜索框 | boolean | true |
showIndex | 是否显示 index | boolean | true |
indexWidth | 第一列 index 宽度 | number | 50 |
detectNumber | 是否自动检测 number 字段,number 字段靠右显示 | boolean | true |
defaultPageIndex | 分页默认值 | number | 1 |
defaultPageSize | 页码默认值 | number | 10 |
defaultPageIndex | 页码选项可选值 | number | PAGE_SIZE_OPTIONS |
showColumnsSetting | 是否显示表头设置(控制显示哪些表头) | boolean | true |
defaultHiddenColumns | 默认隐藏的字段 | Array<string> |
[] |
showExport | 是否显示导出按钮 | boolean | true |
exportTitle | 导出表格名称 | string | '导出数据' |
tableClickCopy | 是否支持点击单元格复制 | boolean | true |
export interface FilterConfig {
key: string;
label?: string;
multiple?: boolean;
defaultValue?: any;
preKeys?: string[];
}
interface ExpandColumnSettings {
[key: string]: number; // 超过多少行才显示展开按钮
}
3. 图相关参数
常用的参数:
timeField
timeProps
defaultValues
options
比较难理解的是 defaultValues
options
。
- series: 分析维度字段
- dimension: 时间字段
- measure: 指标字段,有的数据可能缺少指标字段,默认使用次数
defaultValues
定义三个维度的默认值:
示例:
{ series: 'sysver', dimension: '_day' }
分析维度选择框默认选中 sysver 时间字段默认选择_day
options
定义三个维度的可选值:
示例:
options: {
series: {
sysver: '版本',
split_module: '模块',
android_version: '安卓版本',
sysversion: '软件版本号',
data_source: '数据源',
externalModelName: '机型',
},
dimensions: { _day: '反馈日期' },
},
指定分析维度的可选项只有这 6 个字段,时间字段只能选择_day
Property | Description | Type | Default |
---|---|---|---|
timeField | 指定时间字段 | string | true |
timeProps | 补充的时间字段,配合 timeField 字段 | TimeProps |
true |
defaultValues | 维度设置默认值 | CubeSettings |
{} |
options | 维度可选值,不传的话用字段聚合结果 | PassedInCubeOptions |
true |
showSeriesSelection | 是否显示分析维度 选择框 |
boolean | true |
showDimensionSelection | 是否显示时间字段 选择框 |
boolean | true |
showMeasureSelection | 是否显示指标 选择框 |
boolean | true |
chartHeight | 图高度 | string | 350 |
chart1Width | 左图宽度 | string | 500 |
chart1Limit | 左图高度 Top 数量 | number | 10 |
defaultChart1Type | 左图显示模式 | 'pie' | 'bar' | 'bar' |
showSwitchChart1 | 是否显示作图模式切换按钮 | boolean | true |
showSkipWeek | 是否显示跳过周末选项(必须有 timeField) | boolean | true |
showSkipHoliday | 是否显示显示跳过节假日(必须有 timeField) | boolean | true |
export interface CubeSettings<T> {
dimension?: keyof T | UnwrapRef<keyof T>;
series?: keyof T | UnwrapRef<keyof T>;
measure?: keyof T | UnwrapRef<keyof T> | CountField;
}
export interface PassedInCubeOptions {
dimensions?: Record<string, string>;
series?: Record<string, string>;
measures?: Record<string, string>;
}
export interface TimeProps {
year?: string;
month?: string;
week?: string;
day?: string;
hour?: string;
}
// 例如:
const timeProps = { day: '反馈日期', week: '反馈周', month: '反馈月' };
示例参数
// 表格数据源
const data = [{
{
externalModelName: 'X9s',
product: 'PD1616BA',
feedback_time: '2021-04-16T00:08:46',
split_module: '其他',
sysver: '',
description: '打不开',
android_version: '',
sysversion: '',
imei: '867821032381965',
telephone: '',
data_source: 'faq',
log_path: '',
},
}]
const props = {
showSwitch: 'true',
defaultType: 'table',
filterFields: [
{ key: 'externalModelName', multiple: true, defaultValue: [] },
{ key: 'sysver', multiple: true },
{ key: 'data_source', multiple: true },
],
defaultSortKey: 'feedback_time',
defaultSortDirection: 'descend',
// description字段超过两行显示展开按钮
expandKeys: { description: 2 },
// 下面是图的设置
// 没有指标字段会默认用次数
showMeasureSelection: 'false',
showSeriesSelection: 'true',
showDimensionSelection: 'true',
// 分析维度选择框默认选中 sysver 时间字段默认选择_day
defaultValues: { series: 'sysver', dimension: '_day' },
// 表格数据时间字段是feedback_time
timeField: 'feedback_time',
// 根据feedback_time字段补充天周月时间维度
timeProps: { day: '反馈日期', week: '反馈周', month: '反馈月' },
options: {
series: {
sysver: '版本',
split_module: '模块',
android_version: '安卓版本',
sysversion: '软件版本号',
data_source: '数据源',
externalModelName: '机型',
},
dimensions: { _day: '反馈日期' },
},
};
Dependencies
Dependencies
@ls-lint/ls-lint: ^1.9.2@rollup/plugin-node-resolve: ^10.0.0@stability/v-charts: ^0.5.4@types/jest: ^26.0.15@types/lodash: ^4.14.168@typescript-eslint/eslint-plugin: ^4.8.1@typescript-eslint/parser: ^4.8.1@vitejs/plugin-vue: ^1.2.2@vue/compiler-sfc: ^3.0.7@vue/eslint-config-prettier: ^6.0.0@vue/eslint-config-typescript: ^7.0.0@vue/test-utils: ^2.0.0-beta.10autoprefixer: ^10.2.5axios: ^0.21.1babel-jest: ^26.6.3conventional-changelog-cli: ^2.1.1cross-env: ^7.0.2dayjs: ^1.10.4eslint: ^7.13.0eslint-plugin-prettier: ^3.1.4eslint-plugin-vue: ^7.1.0gh-pages: ^3.1.0husky: ^4.3.0jest: ^26.6.3koa: ^2.13.0koa-static-server: ^1.5.2npm: ^7.6.3postcss: ^8.2.8prettier: ^2.1.2pretty-quick: ^3.1.0rimraf: ^3.0.2rollup-plugin-alias: ^2.2.0rollup-plugin-commonjs: ^10.1.0rollup-plugin-css-only: ^2.1.0rollup-plugin-styles: ^3.14.1rollup-plugin-typescript2: ^0.29.0rollup-plugin-vue: ^6.0.0-beta.11tailwindcss: ^2.0.3ts-jest: ^26.4.4typescript: ^4.0.5vite: ^2.6.13vite-plugin-vue2: ^1.4.0vitepress-for-component: ^0.16.3vue: ^3.2.20vue-demi: ^0.12.1vue-jest: ^5.0.0-alpha.6vue-tsc: ^0.29.2