GTable 表格

以数据驱动的表格组件

所有属性都继承自element-plus

基础用法

<template>
  <g-table :columns="columns" :data="tableData" :show-page="false"></g-table>
</template>

<script setup lang="ts">
import { ITableOrFormColumn } from 'gao-components-plus';
import { GTable } from 'gao-components-plus';
import { ref } from 'vue';

type TRow = {
  name: string
  age: number
  sex: string
}

const tableData = ref([
  { name: '张三', age: 18, sex: '男' },
  { name: '李四', age: 20, sex: '女' },
  { name: '王五', age: 22, sex: '男' },
  { name: '赵六', age: 24, sex: '女' },
])

const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name'},
  {label: '年龄', prop: 'age'},
  {label: '性别', prop: 'sex'}
])
</script>

<style lang="scss" scoped>

</style>

api获取数据

<template>
  <g-table :columns="columns" :api="getList" :show-page="false"></g-table>
</template>

<script setup lang="ts">
import { ITableOrFormColumn } from 'gao-components-plus';
import { GTable } from 'gao-components-plus';
import { ref } from 'vue';

type TRow = {
  name: string
  age: number
  sex: string
}

const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name'},
  {label: '年龄', prop: 'age'},
  {label: '性别', prop: 'sex'}
])

function getList() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200, 
        data: [
          { name: '张三', age: 18, sex: '男' },
          { name: '李四', age: 20, sex: '女' },
          { name: '王五', age: 22, sex: '男' },
          { name: '赵六', age: 24, sex: '女' },
        ]
      })
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>

</style>

分页

<template>
  <g-table :columns="columns" :api="getList" :show-page="true"></g-table>
</template>

<script setup lang="ts">
import { ITableOrFormColumn } from 'gao-components-plus';
import { GTable } from 'gao-components-plus';
import { ref } from 'vue';

type TRow = {
  name: string
  age: number
  sex: string
}



const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name'},
  {label: '年龄', prop: 'age'},
  {label: '性别', prop: 'sex'}
])

function getList() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          list: [
            { name: '张三', age: 18, sex: '男' },
            { name: '李四', age: 20, sex: '女' },
            { name: '王五', age: 22, sex: '男' },
            { name: '赵六', age: 24, sex: '女' },
          ],
          total: 4
        }
      })
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>

</style>

自定义插槽

两种方式template 和 render

<template>
  <g-table :columns="columns" :data="tableData" :show-page="false">
    <template #name="scope">通过template自定义=={{ scope.row.name }}</template>
  </g-table>
</template>

<script setup lang="tsx">
import { ITableOrFormColumn } from 'gao-components-plus';
import { GTable } from 'gao-components-plus';
import { ref } from 'vue';

type TRow = {
  name: string
  age: number
  sex: string
}

const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name'},
  {label: '年龄', prop: 'age', tableRender(scope){
    return '通过tableRender自定义==' + scope.row.age
  }},
  {label: '性别', prop: 'sex'}
])

const tableData = ref([
  { name: '张三', age: 18, sex: '男' },
  { name: '李四', age: 20, sex: '女' },
  { name: '王五', age: 22, sex: '男' },
  { name: '赵六', age: 24, sex: '女' },
])

</script>

<style lang="scss" scoped>

</style>

搜索

<template>
  <g-table :columns="columns" :api="getList" :show-page="true"></g-table>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { type ITableOrFormColumn, type GTableSearchParams } from 'gao-components-plus';
import { GTable } from 'gao-components-plus';
import { ref } from 'vue';

type TRow = {
  name: string
  age: number
  sex: string
}


const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name', search: true, type: 'input'},
  {label: '年龄', prop: 'age'},
  {label: '性别', prop: 'sex'}
])

function getList(params: GTableSearchParams<TRow>) {
  ElMessage.info(`搜索参数==> ${JSON.stringify(params)}`)
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          list: [
            { name: '张三', age: 18, sex: '男' },
            { name: '李四', age: 20, sex: '女' },
            { name: '王五', age: 22, sex: '男' },
            { name: '赵六', age: 24, sex: '女' },
          ],
          total: 4
        }
      })
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>

</style>

属性

除以下属性外，其他属性都继承自element-plus

名称	描述	类型	默认值
data	数据	Array	-
api	api获取	(...args: any[]) => Promise<any>	-
colNum	搜索表单列数	Number	1
columns	表格项配置	IformITableOrFormColumn[]	-
pageSize	每页条数	Number	10
showPage	是否展示分页	Boolean	true
paginationConfig	分页配置	GPaginationProps	-
immediate	是否立即加载数据	Boolean	true

columns配置项

名称	描述	类型	默认值
label	label	String	-
prop	绑定的key	String	-
type	表单项类型	'index' 'selection' 'input' 'textarea' 'number' 'color' 'select' 'radio' 'switch' 'date' 'dates' 'daterange' 'datetime' 'datetimerange' 'month' 'months' 'monthrange''year' 'years' 'yearrange' 'week' 'weekrange'	-
children	多级表头	IformITableOrFormColumn[]	-
labelWidth	label宽度	string | number	继承gform
span	列宽 能被24整除的整数	number	24/colNum
tableRender	自定义渲染	(scope: ITableScope<T>) => VNode	string
clearable	可被清除	boolean	false
showAlpha	颜色是否显示透明(仅type=color)	boolean	true
unlinkPanels	左右无关联(仅type=daterange、datetimerange、monthrange、yearrange、weekrange)	string	-
renderPickerCell	日期自定义渲染(仅type=daterange、datetimerange、monthrange、yearrange、weekrange)	(cell: DateCell) => VNode | string	-

emit事件

名称	描述	类型	默认值
search	搜索	(params: any) => void	-
reset	重置	() => void	-

插槽

名称	描述	类型	默认值
toolbar	工具栏	(params: any) => void	-

除以上方法外，其他方法都继承自element-plus

实例

<g-table ref="tableRef"></g-table>
<script>
const tableRef = useTemplateRef<GTableInstance>('tabelRef')

formRef.value?.GTable 返回的是element-plus的table实例

</script>