turbo-table v0.3.0

快速上手

这是一个简单的带搜索条件和分页的表格组件

安装

建议
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
}

组件抛出的方法

组件emit方法

插槽

默认情况组件标签中间的内容全部插入到表格的正上方

问题

有问题可提工单请备注详细 https://gitee.com/haoAzhu/turbo-table/issues