Skip to content

TableCombo

集成表格通用功能

table + pagination + search

案例

Total 4
  • 1
vue
<script setup lang="ts">
import { reactive } from 'vue'
import { TableComboOpts } from '../components/TableCombo/types'
import TableCombo from '../components/TableCombo/index.vue'

defineOptions({ name: 'TableComboTest' })

const tableOpts = reactive<TableComboOpts>({
  data: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ],
  columns: [
    {
      prop: 'date',
      label: '日期',
      width: '180'
    },
    {
      prop: 'name',
      label: '姓名',
      width: '180'
    },
    {
      prop: 'address',
      label: '地址',
    }
  ],
  total: 4
})
</script>

<template>
  <div class="comp">
    <table-combo :opts="tableOpts" />
  </div>
</template>

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

属性

属性名类型描述备注
optsTableComboOpts用于配置表格数据必填

事件

事件名参数描述备注
refreshTableComboQueryParams用于触发表格数据的刷新必填

插槽

暂无

实例

实例属性类型描述
tableInsElTableel-table 的实例

类型

typescript
interface TableComboQueryParams {
  pageSize: number
  pageIndex: number
  queryText?: string
}

interface TableComboOpts<T = any> {
  data: any[]
  columns: Array<Partial<TableColumnCtx<T>>>
  // 表格最高高度, 超出则会变为滚动
  maxHeight?: string
  // 总数,用于分页
  total: number
  // el-pagination组件的props,参考官方文档
  pagination?: { small?: boolean; background?: boolean; layout?: string }
  // el-table的原生props,参考文档
  rawProps?: Partial<Record<keyof TableProps<T>, any>>
}