native-ui 数据表格简单二次封装

Naive UI 是一个 Vue3 的组件库。 组件蛮丰富的，数据表格写法都是render 函数写法，为了简化和统一组件的使用，二次封装一次简单表格，固定模式

git:拾忆/demo-vue3 - Gitee.com

目录

• components/BaseTable
  • edit.vue 可编辑表格
  • index.vue 默认表格带有分页
  • editControl.ts 可编辑表格 编辑项的控件
  • filterControl.ts 默认表格自定义搜索项
  • type.ts 表格拓展类型说明
  • util.ts 表格拓展工具

使用说明

两种表格

1. 默认表格 带有分页
2. 可编辑表格 不带分页

Props

config

名称	说明	类型	默认值
idKey	数据唯一字段名	string	---
fixQuery	固定请求带上的参数{}	object	{}
page	默认显示页码	number	0
size	默认显示页数	number	10
pageKey	请求分页页码参数key	string	---
sizeKey	请求分页页数参数key	string	---
apiFunc	请求数据接口	function	(params: any) => Promise
formatTableData	格式化表格数据，返回新的表格数据	function	(data: T[]) => T[]
formatQueryParams	发起请求时格式化对应的请求参数，入参params请求参数	function	(params: any) => {}
searchMap	非异步搜索时，判断数据是否匹配	function	params 搜索参数 item 表格数据项(params: any, item: any) => T[]

columns 其他属性参考

名称	说明	类型	默认值
minWidth	---	---	---
key	---	string	---
formateHtml	渲染单元格 支持html标签	function	(row: T) => string
render	渲染单元格 优先级高于formateRender formateHtml	function	(row: T, index?: number) => any
actionsList	操作按钮	array	T[{text:'',onClick: (row: T) => any}]

仅编辑拓展的 columns

名称	说明	类型	默认值
editType	编辑类型	string	'input' | 'select' | 'date'
changeEdit	是否切换编辑	boolean	false
editConf	编辑控件配置项	{ options: [{label:'',value:''}];placeholder: string;type: string;value: any;...其他组件属性}	ControlConf
formateRender	渲染单元格 优先级高于formateHtml	function	(row: T) => any

仅 默认表格 拓展的 columns

名称	说明	类型	默认值
filterControlType	筛选类型	string	'input' | 'select' | 'date'
filterControl	筛选控件配置项	{ options: [{label:'',value:''}];placeholder: string;type: string;value: any;...其他组件属性}	---
renderFilterMenu	优先级高于filterControl 渲染自定义筛选区域	function	(action: T) => any
renderFilterIcon	渲染自定义筛选图标	function	(action: T) => any

pagination

是否有分页 默认true 仅 默认表格

data

表格数据 默认为[]

Methods

默认表格

名称	说明	参数	返回值
onSearch	搜索	q={}搜索参数, isReset=true 是否重置分页	---
delUpdateData	删除后需要刷新数据	---	---
getSelect	获取单选多选选择数据	---	{ ids: [id].value,items: [row]}
setSelect	单选多选回显选择数据	ids:[], items:[]	---

可编辑表格

名称	说明	参数	返回值
onSearch	搜索	q={}搜索参数, isReset=true 是否重置分页	---
getUpdateData	获得编辑后的数据	---	---

拓展

默认表格 增加过滤类型 往 components/BaseTabl/filterControls文件 filterControlsMap对象增加类型 可编辑表格 增加编辑类型 往 components/BaseTabl/editControl文件 controlsMap对象增加类型