快速上手

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

安装

node >= 20.19+ vue3.0+

npm install turbo-table-plus

使用示例

// 引入自定义组件
import TurboTable from 'turbo-table-plus'
// 引入组件样式
import 'turbo-table-plus/style.css'

app.use(TurboTablePlus)

<template>
  <TurboTablePlus
    ref="tableRef"
    :search-list="searchList"
    :table-header="tableHeader"
    :table-option="tableOption"
    @searchData="searchData"
  >

    <template #addressSlot="{ row, index }">
      <span style="color: red;">
        {{ "第" + index + "行数据：" + row.address }}
      </span>
    </template>

    <template #handleSlot="{ row, index }">
      <TuIconHandle
        :handle-list="handleList"
        :row
        @handleEvent="(handleName: string) => handleEvent(handleName, row, index)"
      />
    </template>
  </TurboTablePlus>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tableRef = ref()

// 搜索配置
const searchList = [
  {
    label: '输入框',
    prop: 'name',
    type: 'Input'
  },
  {
    label: '默认值输入框',
    prop: 'sex',
    type: 'Input',
    defaultValue: '我是默认值',
  },
  {
    label: '下拉框',
    prop: 'sss',
    type: 'Select',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ],
    itemAttrs: {
      clearable: true
    },
  },
  {
    label: '时间选择',
    prop: 'time',
    type: 'DatePicker'
  },
  {
    label: '级联选择器',
    prop: 'aaaaa',
    type: 'Cascader',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '多选框',
    prop: 'bbb',
    type: 'Checkbox',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '自动补全输入框',
    prop: 'ccc',
    type: 'Autocomplete',
    itemAttrs: {
      // 参考element-plus
      'fetch-suggestions': querySearch
    }
  },
  {
    label: '数字输入框',
    prop: 'ddd',
    type: 'InputNumber'
  },
  {
    label: '单选框',
    prop: 'eee',
    type: 'Radio',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '树形选择框',
    prop: 'fff',
    type: 'TreeSelect',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '日期时间选择器',
    prop: 'ggg',
    type: 'DateTimePicker',
    itemAttrs: {
      type: 'datetime'
    }
  },
  {
    label: '日期范围输入框',
    prop: 'leftRange,rightRange',
    type: 'DateRange',
    defaultValue: ["2025-05-20", "2025-05-21"],
    itemAttrs: {
      placeholder: ['start', 'end']
    }
  },
  {
    label: '数字范围输入框',
    prop: 'leftNumberRange,rightNumberRange',
    type: 'NumberRange',
    itemAttrs: {
      placeholder: ['start', 'end']
    }
  }
]

// 表头配置
let tableHeader = [
  {
    prop: 'name',
    label: '姓名',
    heidden: false
  },
  {
    prop: 'address',
    label: '自定义地址',
    slotName: "addressSlot"
  },
  {
    label: '多级表头',
    prop: 'aaa',
    children: [
      {
        prop: 'name2',
        label: '表头1'
      },
      {
        prop: 'name1',
        label: '表头2'
      },
    ]
  },
  {
    label: '操作',
    column: {
      width: '200',
      align: 'center'
    },
    slotName: "handleSlot"
  }
]

// 操作栏按钮
const handleList = [
  {
    iconUrl: new URL("@/assets/test-icon/icon03.png", import.meta.url).href,
    label: "详情",
    handleName: "view"
  },
  {
    iconUrl: new URL("@/assets/test-icon/icon01.png", import.meta.url).href,
    label: "编辑",
    handleName: "edit"
  },
  {
    iconUrl: new URL("@/assets/test-icon/icon02.png", import.meta.url).href,
    label: "删除",
    handleName: "delete"
  }
]

// 操作栏点击事件
const handleEvent = (handleName: string, row: any, index: number) => {
  console.log(handleName);
  console.log(row);
  console.log(index);
}

const searchData = (data: any) => {
  // 执行查询，data 为查询条件

  /**
   * 请求数据之后
  */
  // 渲染数据，传入数据和总数
  tableRef.value?.setData([], 10)
}
</script>

<style lang="scss" scoped></style>

搜索配置属性

searchList：接收一个数组，接口为下面所示

/**
 * 搜索组件列表配置
 * @label 描述
 * @prop 绑定字段
 * @type 组件类型
 * @defaultValue -- 默认值
 * @options 下拉选项
 * @span 空间分配权重
 * @heidden 默认是否显示
 * @itemAttrs 组件相关属性
 * @formItem 表单Item相关属性
 * @events 组件事件
 */
export interface SearchItemType {
  label: string;
  prop: string;
  type: "Input" | "Select" | "DatePicker" | "Cascader" | "Checkbox" | "Autocomplete" | "InputNumber" | "Radio" | "TreeSelect" | "DateTimePicker" | "DateRange" | "NumberRange";
  defaultValue?: any;
  options?: any[];
  span?: number;
  heidden?: boolean;
  itemAttrs?: any;
  formItem?: any;
  events?: any;
}

searchOption：搜索条件额外配置，接收一个对象，接口为下面所示

/**
 * @immediate 是否立刻执行查询 true
 * @heidden 是否显示查询条件 true
 */
export interface SearchOptionType {
  immediate?: boolean;
  heidden?: boolean
}

表头配置

tableHeader：接收一个数组，接口为下面所示

/**
 * @label 表头名称
 * @prop 表头绑定字段
 * @heidden 初始化是否显示表头,默认 true
 * @column 表头属性配置，支持Element该组件所有属性
 * @slotName 插槽名称
 * @children 多级表头
*/
export interface tableHeaderType {
  id?: string
  label: string;
  prop?: string;
  heidden?: boolean;
  column?: any;
  slotName?: string;
  children?: tableHeaderType[]
}

表格其他配置

tableOption：表格额外配置，接收一个对象，接口为下面所示

/**
 * @selection 是否显示多选
 * @selectionOption 多选配置，参考el-table
 * @index 是否显示索引
 * @hiddenSlot 是否显示插槽
 * @tableHeight 表格高度
 * @expand 展开行
 * @tableAttrs 表格绑定属性
 * @tableEvent 表格绑定事件
 */
export interface tableOptionType {
  selection?: boolean;
  selectionOption?: any;
  index?: boolean;
  hiddenSlot?: boolean;
  hiddenToolbar?: boolean;
  tableHeight?: number;
  expand?: boolean;
  tableAttrs?: any;
  tableEvent?: any
}

分页配置

paginationOption：接收一个对象，接口为下面所示

/**
 * @hidden 是否显示分页
 * @option 分页配置(element-plus)
*/
export interface paginationType {
  hidden?: boolean;
  option?: any
}

操作栏属性

操作栏有两种样式，TuIconHandle 和 TuTextHandle

export interface HandleItem {
  iconUrl: string; // icon url地址(仅TuIconHandle有效)
  label: string; // icon 、文字描述
  handleName: string; // 点击事件名称
  size?: number; // 操作icon、文字大小
  show?: boolean | (() => boolean) // 是否显示icon、文字
  disabled?: boolean | (<T>(row: T) => boolean) // 是否禁用icon、文字
  option?: any; // 按钮配置项(element-plus)
}

/**
 * @max 最大展示个数
 * @row 行数据
 * @handleList 操作栏列表
*/
export interface HandleOption {
  max?: number;
  row?: any;
  handleList: HandleItem
}

组件抛出的方法

| 方法名 | 说明 | 类型 | 参数 | 返回值 | | -------|----|-----|---------|-------| |setData| 设置表格数据 | Function | 接收两个参数，一个数组，一个总数，请确保设置的数据有 id 字段，如果没有请设置 row-key 字段 | -- | |getSearchDate| 获取搜索条件 | Function | -- | 返回搜索条件 | |setSearchData| 设置搜索条件 | Function | 接收三个参数，第一个参数为条件对象，第二个参数为是否立即查询，默认false，第三个参数是否重置查询条件，默认false | -- | |setSearchHidden| 设置搜索条件是否显示 | Function | 两个参数，prop:string,isShow:boolean | -- | |setColumHidden| 设置表头是否显示 | Function | 两个参数，prop:string,isShow:boolean | -- | |getTableData| 获取表格绑定数据 | Function | -- | 当前表格中的数据 | |getTableInstance| 获取表格实例对象 | Function | -- | 返回 el-table 表格实例 | |setDropDown| 设置选择器的下拉数据 | Function | 三个参数，prop:string,list:any[],model?:any | -- |

组件emit方法

| 属性名 | 说明 | 类型 | 参数 | 返回值 | | -------|----|-----|---------|-------| |searchData| 调用查询方法 | Function | 两个参数，第一个参数为查询条件，第二个参数为是否重置触发 | -- |

插槽

默认情况组件标签中间的非插槽内容全部插入到表格与搜索条件中间的空格处

问题

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