turbo-table
v0.5.2
Published
自定义表格组件
Downloads
536
Readme
快速上手
这是一个简单的带搜索条件和分页的表格组件
安装
建议
node >= 16.20.2
vue3.0+
npm install turbo-table使用示例
// 引入自定义组件
import TurboTable from 'turbo-table'
// 引入组件样式
import 'turbo-table/style.css'
app.use(TurboTable)<template>
<TurboTable
ref="tableRef"
:search-list="searchList"
:table-header="tableHeader"
@search-data="searchData"
@handl-event="handlEvent"
>
<el-button type="primary">新增</el-button>
</TurboTable>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableRef = ref()
const searchList = [
{
label: '姓名',
prop: 'name',
type: 'Input',
model: ''
},
{
label: '年龄',
prop: 'age',
type: 'Select',
model: '',
option: [
{ value: 888, label: '测试01' },
{ value: 555, label: '测试02' }
],
ItemAttrs: {
clearable: true
// 支持Element Select 此组件所有原生属性
}
}
]
// 表头配置项
let tableHeader = [
{
prop: 'name',
label: '姓名'
},
{
prop: 'age',
label: '年龄',
ItemColumn: {
width: '120'
// 支持Element FormItem 此组件所有原生属性
}
},
{
label: '多级表头',
children: [
{
prop: 'name2',
label: '表头1'
},
{
prop: 'name3',
label: '表头2'
},
]
},
{
label: '操作',
defineCustom: (row: any) => {
return [
{
label: '详情',
type: 'icon',
src: '/icon.png',
handle: 'clickHandle'
},
{
label: '编辑',
handle: 'editHandle',
option: { type: 'danger' }
}
]
}
]
// xxx方法
const clickHandle = (row: any) => {
console.log(row)
}
// 处理事件
const handlEvent = (evenName: string, row: any) => {
switch (evenName) {
case 'clickHandle':
clickHandle(row)
break;
case 'editHandle':
clickHandle(row)
break;
default:
break;
}
}
const searchData = (data: any) => {
// 执行查询，data 为查询条件
/**
* 请求数据之后
*/
// 渲染数据，传入数据和总数
tableRef.value.setData([], 100)
}
</script>
<style lang="scss" scoped></style>handle配置样例
需要再组件绑定 handl-event 事件，参考上面示例
为某个单元格添加点击事件，例：操作栏添加点击事件，1.0 版本后旧的写法将不再支持
/**
* @label 操作按钮名称
* @type 按钮类型，icon/text(默认text)
* @src icon 路径，仅当type为icon 时有效
* @handle 处理函类型
* @style icon 样式，仅当type为icon 时有效，默认正方形图片
* @option text 类型按钮的其他样式，参考el-button
*/
const tableHeader = [
{
prop: 'name',
label: '姓名',
handle: 'clickHandle'
},
{
label: '操作',
ItemColumn: {
width: '140',
align: 'center'
},
menuHandle: {
max: 1,
type: 'icon',
moreType: 'icon',
buttonList: [
{
label: '详情',
src: '/icon.png',
// new URL('@/assets/images/image01.png', import.meta.url).href
handle: 'clickHandle',
option: { type: 'danger' }
},
{
label: '编辑',
src: '/icon.png',
handle: 'clickHandle',
show: false
},
{
label: '编辑1',
src: '/icon.png',
handle: 'clickHandle',
disabled: true
}
]
}
}
]
/**
* @max 操作按钮最大展示数,默认最大3
* @type 按钮样式 text\icon 默认text
* @moreType 更多样式 text\icon 默认text
* @style icon 样式
* @popoverWidth 更多时弹框宽度,min-150
* @buttonList 操作按钮列表
*/
export interface handleType {
max?: number
type?: string;
moreType: string;
style?: any;
popoverWidth?: number;
buttonList?: buttonType[]
}
/**
* @label 按钮文字
* @src 按钮icon
* @handle 点击事件名称
* @option 文字按钮配置，参考el-button
* @show 是否显示
* @disabled 是否禁用
*/
export interface buttonType {
label: string;
src?: string;
handle: string;
option?: any
show?: boolean
disabled?: boolean
}搜索配置
searchList：接收一个数组，接口为下面所示
/**
* @label 展示的名称
* @prop 绑定的属性
* @type 组件类型 输入框，下拉框，日期选择器，树形选择器，单选框，树形下拉框，数字输入框，范围输入框
* @model 默认值，不传时为 ""
* @span 单个组件占比（优先级最高）
* @show 组件是否显示(只读属性)
* @option 组件为选择框时的下拉列表
* @ItemAttrs 该组件的其它属性
* @ItemColumn FormItem的所有属性
* @events 该组件绑定的事件
*/
// InputRange 类型的输入框计划在 1.0 版本移出，请改为 NumberRange
export interface formType {
label: string;
prop: string;
type: 'Input' | 'Select' | 'DatePicker' | 'Cascader' | 'Radio' | 'TreeSelect' | 'InputNumber' | 'NumberRange' | 'DateRange' | 'InputRange';
model?: string | number | boolean | string[] | number[];
option?: any[];
span?: number;
show?: boolean;
ItemAttrs?: any;
ItemColumn?: any;
events?: any;
}searchOption：搜索条件额外配置，接收一个对象，接口为下面所示
/**
* @immediate 初始化是否立刻执行查询
* @span 单个组件占一行的比例
* @isShow 是否显示搜索组件
*/
export interface optionType {
immediate?: boolean
span?: number
isShow?: boolean
}表头配置
tableHeader：接收一个数组，接口为下面所示
/**
* @label 表头名称
* @prop 表头绑定字段,当 prop 为 # 号是时代表自定义内容
* @show 初始化是否显示表头,默认 true
* @ItemColumn 表头其他属性，支持Element该组件所有属性
* @defineCustom 自定义表格内容，接收 h 函数，或自定格式数组
*/
export interface tableHeaderType {
label: string;
prop: string;
show?: boolean;
ItemColumn?: any;
defineCustom?: ((type: string | Component, children?: Children | Slot) => VNode) | (<T>(data: T) => customArr[]);
children?: tableHeaderType[]
}分页配置
paginationOption：接收一个对象，接口为下面所示
/**
* @isShow 是否显示分页
* @limit 一页几条
* @pageSizes 快捷切换一页几条
* @layout 分页布局结构
* @background 是否添加背景颜色
*/
export interface paginationType {
isShow?: boolean;
limit?: number;
pageSizes?: number[];
layout?: string;
background?: boolean;
}表格其他配置
tableOption：表格额外配置，接收一个对象，接口为下面所示
/**
* @tableHeight 表格高度，默认父容器 100%
* @isSelection 是否显示多选框，默认 false
* @selectionOption 专属配置项，type=selection 的列有效
* @isIndex 是否显示序号，默认 true
* @hiddenSlot 是否显示插槽，默认 true
* @expand 是否使用展开行，接收一个 h 函数或组件
* @tableAttr 绑定在 table 上的属性，支持Element该组件所有属性
* @tableEvent 绑定在 table 上的事件，支持Element该组件所有事件
*/
export interface tableOptionType {
tableHeight?: number;
isSelection?: boolean;
isIndex?: boolean;
hiddenSlot?: boolean;
selectionOption?: {
[x: string]: any
};
expand?: (type: string | Component, children?: Children | Slot) => VNode;
tableAttr?: any;
tableEvent?: any
}组件抛出的方法
| 属性名 | 说明 | 类型 | 参数 | 返回值 | | -------|----|-----|---------|-------| |getTableData| 获取表格绑定数据 | Function | -- | 当前表格中的数据 | |getTableRef| 获取原生表格实例 | Function | -- | 返回 el-table 表格实例 | |setData| 设置表格数据 | Function | 接收两个参数，一个数组，一个总数 | -- | |setHidden| 设置组件是否显示 | Function | 两个参数，prop:string,isShow:boolean | -- | |setDropDown| 设置选择器的下拉数据 | Function | 三个参数，prop:string,list:any[],model?:any | -- | |refreshData| 刷新数据，也可用作主动设置查询条件 | Function | 接收一个对象，query:Object,immediate:boolean | -- |
组件emit方法
| 属性名 | 说明 | 类型 | 参数 | 返回值 | | -------|----|-----|---------|-------| |searchData| 调用查询方法 | Function | 两个参数，第一个参数为查询条件，第二个参数为是否重置触发 | -- |
插槽
默认情况组件标签中间的内容全部插入到表格的正上方
问题
有问题可提工单请备注详细 https://gitee.com/haoAzhu/turbo-table/issues