useGTable

表格hook用法

基础用法

<template>
  <tableView></tableView>
</template>

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


type TRow = {
  /**名称 */
  name: string
  /** 年龄 */
  age: number
  /** 性别 */
  gender: string
  /** 地址 */
  address: string
}




const columns = ref<ITableOrFormColumn<TRow>[]>([
  {label: '姓名', prop: 'name', type: 'input'},
  {label: '年龄', prop: 'age', type: 'input'},
  {label: '性别', prop: 'gender', type: 'select', options: [{label: '男', value: '1'}]},
  {label: '地址', prop: 'address', type: 'textarea'},
])

const { tableView, getTableRef, getTableData, getElTableRef, reset } = useGTable({
  columns: columns.value,
  showPage: false,
  data: [
    {name: '张三', age: 18, gender: '1', address: '北京市'},
  ],
  slots: {
    name: (aa: ITableScope<TRow>) => {
      return `通过slots自定义字段==${aa.row.name}`
    },
  }
})



</script>

<style lang="scss" scoped>

</style>

参数

• 入参同GTable组件传参
• 额外参数

名称	描述	类型	默认值
slots	通过slots传递插槽	[K in keyof T]: (scope: ITableScope<T>) => VNode | string | number	-

返回值

名称	描述	类型	默认值
tableView	组件	() => VNode	-
tableRef	组件ref	GTableInstance	-
getTableRef	获取GTable实例	() => GTableInstance	-
getTableData	获取表格数据	() => any	-
getElTableRef	获取elTable实例	() => ElTableInstance	-
search	搜索	() => void	-
reset	重置	() => void	-