# g-table

**Repository Path**: ujjldn/g-table

## Basic Information

- **Project Name**: g-table
- **Description**: 基于 Vue 3 + Element Plus 的可配置化表格组件，支持远程/本地数据、搜索、分页、列设置、高级筛选等功能。多级表头支持（递归渲染）、数据表属性可视化编辑、数据列可视化编辑、可通过sql语句生成数据列(create table/insert into/update)。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: 2.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-06-21
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI

## README

<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-07-03 17:33:20
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-11-17 18:40:22
 * @FilePath: \g-table\README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
---

# 📊 G-Table - 可配置化 Vue 表格组件

> 基于 Vue 3 + Element Plus 的可配置化表格组件，可视化配置表格属性和数据列，支持远程/本地数据、搜索、分页、列设置、高级筛选等功能。

---

## ✅ 功能亮点

- 🧱 支持远程和本地数据源
- 🔍 通用关键字搜索 + 高级字段筛选
- 📋 列设置（显示/隐藏列）
- 📈 分页 & 排序支持
- 📥 插槽支持：工具栏、操作列、自定义列渲染等
- 🔄 数据刷新与状态保持
- 📐 多级表头支持（递归渲染）
- 📝 数据表属性可视化编辑
- 📝 数据列可视化编辑
- 📝 可通过sql语句生成数据列(create table/insert into/update)
- 📝 数据列除插槽slot-${prop}外，可以直接简单格式化取字典数据 getDict or getOption
- 📝 合计行，summaryType可以选择默认的sum,count等内置的函数，或自定义函数summaryMethod

---

## 📦 技术栈

| 技术 | 版本 |
|------|------|
| Vue | ^3.2 |
| Element Plus | latest |
| Axios | latest |

---

![image](./test/gtable.jpg)
![image](./test/options.jpg)
![image](./test/columns.jpg)

## 📁 目录结构

```bash
src/
├── components/
│   └── g-table.vue        # 表格组件
|   └── g-table-multi-level-column.vue        # 表格数据列渲染组件 (多级)，未提取出来前仅支持两级表头，原文件在temp目录下
|   └── column-setting-tree         # 表格数据列树组件，用于列设置是否显示，原el-checkbox-group组件，不支持多级列设置
│   └── g-table-columns-editor.vue        # 表格数据列可视化编辑组件
│   └── g-table-options-editor.vue        # 表格属性和数据列可视化编辑组件，包括g-table-columns-editor.vue功能
│   └── import-excel-dialog.vue        # excel导入预览组件
│   └── search-inputs.vue        # 高级搜索组件 用于 g-table
│   └── search-select-options-input.vue        # 搜索组件select 组件 选项输入框，用于g-table-columns-editor、g-table-options-editor
├── utils/
│   └── utils.js           # 工具函数（SQL解析、生成测试数据等）
│   └── directive.js       # 数据列可视化编辑组件拖拽排序库
│   └── export.js          # 数据、列、配置项导出
│   └── import.js          # 数据、列、配置项导入
├── test/
│   └── columns.html        # 表格列编辑示例页面
│   └── test.html           # 表格示例页面
│   └── options.html        # 表格属性示例页面  包括三个组件  属性项列编辑，列编辑，预览
```

---

## 📦 安装使用

### 1. 安装依赖

```bash
npm install
```

### 2. 引入组件

```vue
<template>
  <g-table
    v-model:table-options="tableOptions"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"  
   >
   <!-- @handleAdd="handleAdd" 不建议使用，直接Slot boolbar 里增加按钮即可  -->
   <!--   @update:selected="onSelected"
    @update:current="onCurrent"
    @sort-change="onSortChange"-->
    <!--行操作Slot-->
    <template #action="{ row, $index }">
      <el-button-group>
        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        <el-button size="small" @click="handleCopy(row)">复制</el-button>
      </el-button-group>      
    </template>
    <!--表格左工作栏Slot-->
    <template #toolbar>
      <el-button @click="handleAdd">添加</el-button>
      <el-button @click="getSelectRows">getSelect</el-button>
    </template>
  </g-table>

  <!--  属性编辑、列编辑、预览
  <g-table-options-editor
    v-model:table-options="tableOptions"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"
  />

  <g-table-columns-editor //列编辑
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"
  />
  -->
</template>

<script setup>
import GTable from './components/g-table.vue'
import GTableOptionsEditor from '@/components/g-table-options-editor.vue'
import GTableColumnsEditor from '@/components/g-table-columns-editor.vue'
import { ref,reactive } from 'vue'

const tableOptions = reactive({
        dataApi: '', // 数据源Api     http://localhost:5173/public/mockData.json
			  rowKey: 'name', // 行唯一标识字段名
			  pagination: true, // 是否分页
			  showSummary: true, // 是否显示合计行
			  summaryColumns: ['salary'], // 合计行字段名
			  selectionType: 'multiple', // 选择类型
			  selectedRowKeys: ['用户1','用户3'], // 已选行 rowKey字段的值
			  options: {  // 其他配置项，没有列表里width等的自行添加
				border: true, // 是否显示边框
				stripe: true,  // 是否显示斑马纹
				pageSizes: undefined // 每页显示数量选择器选项 [10,20,50,100,200]
			  },
			  treeProps:{  // 树形结构配置项
				children: 'children', // 子级字段名
				hasChildren: 'hasChildren', // 是否有子级字段名（可选）
				checkStrictly: false, // 是否父子不关联
			  },
			  tableLayout:'fixed', // 表格布局
			  showDefaultAdd: false, // 是否显示默认新增按钮
			  showAdvancedSearch: true, // 是否显示高级搜索
			  showRefresh: true, // 是否显示刷新按钮
			  showColumns:true, // 是否显示列设置
			  showExport: true, // 是否显示导出Excel按钮
			  showImport: true, // 是否显示导入按钮
})

const tableColumns = ref([
    {
      "columnId": 0,
      "prop": "name",
      "label": "姓名",
      "searchable": true,
      "fieldOptions": {
        "type": "text"
      },
      "visible": true,
      "resizable": true,
      "summaryType": "smax", // 数字：合计sum、平均值avg、中位数median、最大值max、最小值min，文本：最大值smax、最小值smin，其他：计数count
    },
    {
      "columnId": 1,
      "prop": "gender",
      "label": "性别",
      "searchable": true,
      "fieldOptions": {
        "type": "select",
        "options": [
          {
            "label": "男",
            "value": "1"
          },
          {
            "label": "女",
            "value": "2"
          }
        ]
      },
      "visible": false,
      "resizable": true,
      "formatterFn": "// console.log(column);\nconst option = column?.fieldOptions?.options.find(opt=>opt.value === cellValue);\nreturn option ? option.label : cellValue;"
    },
    {
      "columnId": 2,
      "prop": "birthday",
      "label": "生日",
      "searchable": true,
      "fieldOptions": {
        "type": "date",
        "format": "YYYY-MM-DD"
      },
      "visible": true,
      "resizable": true,
      "formatterFn": "if (cellValue) { \n      const [year, month, day] = cellValue.split('-');\n      return `${year}年${month}月${day}日`;\n      } else {\n       return cellValue;\n    }"
    },
    {
      "columnId": 3,
      "prop": "age",
      "label": "年龄",
      "searchable": true,
      "fieldOptions": {
        "type": "number"
      },
      "visible": false,
      "resizable": true,
      "formatterFn": "return cellValue ? cellValue + '岁' : '';"
    },
    {
      "columnId": 4,
      "prop": "salary",
      "label": "工资",
      "searchable": true,
      "slotUsed": true,
      "fieldOptions": {
        "type": "number"
      },
      "visible": true,
      "resizable": true
    },
    {
      "columnId": 1751331498921,
      "prop": "~",
      "headerFlag": true,
      "label": "header",
      "align": "center",
      "children": [
        {
          "columnId": 1751331505953,
          "visible": true,
          "prop": "math",
          "label": "数学"
        },
        {
          "columnId": 1751331508601,
          "visible": true,
          "prop": "english",
          "label": "英语"
        }
      ]
    },
    {
      "columnId": 6,
      "prop": "action",
      "type": "action",
      "label": "操作",
      "slot": "action",
      "width": 180,
      "visible": true,
      "resizable": true
    }
  ])
const tableData = ref([
  { name: '用户1', gender: '1', birthday: '1990-01-01', age: 25, salary: 5000 },
  { name: '用户2', gender: '2', birthday: '1992-05-15', age: 23, salary: 6000 },
  { name: '用户3', gender: '1', birthday: '1988-11-10', age: 37, salary: 7500 },
  { name: '用户4', gender: '2', birthday: '1995-03-22', age: 30, salary: 7000 }
])

const handleAdd=()=> {
  ElMessage.success('新增');
},
const handleEdit=(row)=> {
  ElMessage.info('编辑：' + JSON.stringify(row));
},
const handleDelete=(row)=> {
  ElMessage.error('删除：' + JSON.stringify(row));
},
const handleCopy=(row)=> {
  ElMessage.warning('复制：' + JSON.stringify(row));
},
const getSelectRows=()=> {
  console.log(this.$refs.gtable1.getSelectionRows());
}
</script>
```

---

## 📝 Props 说明

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
|v-model:table-options|object|见示例|
|v-model:table-columns|Array|[]|数据列|
|v-model:table-data|Array|[]|数据源|
|dict-datas|Array|[]|字典数据|
|parent-id|string|''|子表父级ID字段名|
|--------|------|--------|------|
|treeSubLoad|function|()=>{}|树形结构子表数据加载，可直接load选项获取数据|
|update:selected|function|()=>{}|选中行数据更新，返回当前行数据|
|update:current|function|()=>{}|当前行数据更新，返回当前行数据|
|sort-change|function|()=>{}|排序改变|
|update:tableColumns|function|()=>{}|列数据更新，返回当前列数据|
|update:tableData|function|()=>{}|数据更新，返回当前数据|
|update:tableOptions|function|()=>{}|表格配置更新，返回当前表格配置|
|handleAdd|function|()=>{}|新增按钮点击事件|
|handleImport|function|()=>{}|导入框确认导入按钮点击事件|

---
## Slots
| 名称 | 作用 |
|------|------|
|action|操作行按钮|
|toolber|工具栏|
|slot-prop|自定义列,prop为列名，不区分大小写|
|slot-search-prop|自定义高级检索字段编辑框,prop为列名,v2.1.0 新增|
|subTable|子表|
|tableTitle|表格标题，主要用于打印标题|
|left-aside|左侧固定列 showLeftAside为true时生效|
|right-aside|右侧固定列 showRightAside为true时生效|

## 子表示例
```vue
<!-- 主表中使用子表插槽模板 -->
<template>
<gtable  >
  <template #subTable="{ row }">
    <gtable
      :ref="(el) => setSubTableRef(el,row)"
      :table-options="{
        dataApi: 'http://localhost:5173/public/subMockData.json',
        showToolbar:true,
        rowKey: 'name',
        //...
      }"
      :table-columns="[
        {prop: 'name', label: '名称',visible: true,searchable: true,fieldOptions: {type: 'text'}},
        {prop: 'age', label: '年龄',visible: true},
        {prop: 'parentId', label: 'PID',visible: true},
      ]"
      :parent-id="row.name"
    >
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </template>
    </gtable>
  </template>
</g-table>
</template>
<script setup>
const subTables = reactive([]) //存储主表下的子表实例
// 子表实例注册  可自行封装
const setSubTableRef = (el) => {
  if (el && !subTables.includes(el)) {
    if(el.getParentId())
        subTables.push(el)
  }
}

/* 
 子表实例注册 带入主表行信息
const setSubTableRef = (el, row) => {
  if (el && !subTables.some(item => item.el === el)) {
    if(el.getParentId()) // 判断是否是子表 或 子表加载完成  可以使用mounted判断
      subTables.push({ el, row })
  }
} 
*/
//取得指定子表实例
const getSubTable = (parentId) => {
  if (!parentId) return;
  return subTables.find(subTable => parentId === subTable.getParentId());
}
function getSelectRows() {
  //console.log(gtable1.value.getSelectionRows()); // 主表选中的记录信息
 // console.log(gtable1.value.getSelectionRowKeys());  // this.$refs.gtable1.getSelectionKeys
 const names = gtable1.value.getSelectionRowKeys()
 console.log('主表已选择Keys:',names)
 let subNames = []
  //console.log('subTables',subTables)
  if (subTables.length > 0) {
    subTables.forEach((subTable, index) => {
      //console.log(`子表 ${index} 选中行 keys:`, subTable.getSelectionKeys())
      //console.log(`子表 ${index} 选中行数据:`, subTable.getSelectionRows())
      subNames[subTable.getParentId()]=subTable.getSelectionKeys()
    })
  }
  console.log('全部子表已选择Keys:',subNames)

  //
  const subName=getSubTable('用户1')?.getSelectionRowKeys()
  console.log('用户1子表已选择Keys:',subName)
  //
  getSubTable('用户1')?.refreshTable() // 刷新子表等g-table暴露的方法
}
</script>

```

```
```

## ⚙️ API 文档
### g-table 表格选项
|选项名|类型|默认值|说明|
|------|------|------|------|
|dataApi|string|''|数据源 API 地址，例如：http://localhost:5173/public/mockData.json|
|rowKey|string|'name'|行唯一标识字段名，用于区分每一行数据|
|pagination|boolean|true|是否启用分页功能|
|showSummary|boolean|true|是否显示合计行|
|summaryColumns|array|['salary']|合计行字段名列表，指定需要计算的列|
|summaryMethod|function|null|合计行计算方法，接收一个参数，为当前行数据对象，返回一个对象，包含需要计算的字段名和值,当null时，则使用默认方法配合列的summaryType进行计算|
|selectionType|string|'multiple'|选择类型，可选值：'single'、'multiple'|
|selectedRowKeys|array|['用户1','用户3']|已选行的 rowKey 字段值数组|
|options.border|boolean|true|是否显示表格边框|
|options.stripe|boolean|true|是否显示斑马纹（交替行背景色）|
|options.pageSizes|array|undefined|每页显示数量选择器选项，如 [10,20,50,100,200]|
|treeProps.children|string|'children'|树形结构子级字段名|
|treeProps.checkStrictly|boolean|false|是否父子节点选择不关联|
|lazy|boolean|false|是否懒加载树形结构数据,v2.0.6 新增|
|load|function|undefined|懒加载树形结构数据时，获取子级数据的方法，可用@treeSubLoad,v2.0.6 新增|
|tableLayout|string|'fixed'|表格布局方式，如 'fixed'、'auto'|
|showDefaultAdd|boolean|false|是否显示默认新增按钮|
|showAdvancedSearch|boolean|true|是否显示高级搜索功能|
|showRefresh|boolean|true|是否显示刷新按钮|
|showColumns|boolean|true|是否显示列设置功能|
|showExport|boolean|true|是否显示导出 Excel 按钮|
|showImport|boolean|true|是否显示导入功能按钮|
|showToolbar|boolean|true|是否显示工具栏,false时表上左侧工具栏与右侧搜索栏将均不显示,v2.0.2 新增|
|showSearch|boolean|true|是否显示搜索框,v2.0.2 新增|
|hasSubTable|boolean|false|是否显示子表,子表需subTable插槽包新g-table,v2.0.2 新增|
|showPrint|boolean|false|是否显示打印按钮,v2.0.8 新增|
|showTitle|boolean|false|是否显示表格标题,v2.0.8 新增|
|title|string|'G-Table'|表格标题,v2.0.8 新增|
|showSelectionColumn|boolean|true|是否显示选择列,v2.0.8 新增|
|showExpandColumn|boolean|false|是否显示展开列,v2.0.8 新增|
|token|string|''|data-api使用post请求时，增加参数token,v2.1.2 新增|
|Authorization|string|''|data-api使用post请求时，请求头中Authorization的值,v2.1.2 新增|
|loadTableData|function|null|自定义加载表格数据,v2.1.2 新增|
|showLeftAside|boolean|false|是否显示左侧,v2.1.3 新增|
|leftAsideWidth|string or number |200|左侧宽度,v2.1.3 新增|
|showRightAside|boolean|false|是否显示右侧,v2.1.3 新增|
|rightAsideWidth|string or number |200|右侧宽度,v2.1.3 新增|
---

## 🔧 g-table column列选项
| 选项名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
|columnId|number|1|列唯一标识 ID，用于排序和数据列编辑|
|prop|string|'gender'|字段名，对应数据源中的键名|
|label|string|'性别'|列标题显示名称|
|width|number|undefined|列宽度，如 100px、100%、auto 等|
|sortable|boolean|false|是否允许排序|
|fixed|string|undefined|列是否固定，可选值：'left'、'right'|
|align|string|'center'|列对齐方式，可选值：'left'、'center'、'right'|
|headerAlign|string|'center'|列标题对齐方式，可选值：'left'、'center'、'right'|
|searchable|boolean|true|是否在高级搜索中显示编辑框|
|visible|boolean|true|是否显示该列|
|resizable|boolean|true|是否允许调整列宽|
|slotUsed|boolean|undefined|是否使用Slot-prop插槽自定义渲染列，优先formatterFn|
|formatterFn|string|undefined|自定义单元格内容渲染函数，用于简单格式化展示数据，如：return cellValue ? cellValue + '岁' : ''; v2.0.1增加调用字典功能：return getDict('gender', cellValue,'') or getDict({'1':'男','2':'女'}, cellValue,'') or getOption('options1',cellValue,'') or getOption( [{value: '1', label: '选项1'}, {value: '2', label: '选项2'}],cellValue,'') or getOption( column?fieldOptions?.options,cellValue,'') or 指定fieldOptions.useDict和dictCode时直接使用getDict(null, cellValue,'')|
|summaryType|string|'count'|合计行计算方式，summaryColumns内有字段名，且summaryMethod未自定义才有效，可选值：sum, avg, min, max, count, median, smax, smin|
|--------|------|--------|------|
|fieldOptions.onToolbar|boolean|false|是否在工具栏上显示编辑框|
|fieldOptions.width|string|'100%'|工具栏显示编辑框宽度|
|fieldOptions.type|string|'text'|搜索编辑框类型，如 text, number, date, select,daterange,datetimerange 等|
|fieldOptions.format|string|undefined|规定日期格式用|
|fieldOptions.useDict|boolean|false|fieldOptions.type=select才有效，是否使用字典|
|fieldOptions.dictCode|string|undefined|fieldOptions.type=select才有效，字典编码|
|fieldOptions.options|array|[{label: '男', value: '1'}, {label: '女', value: '2'}]|fieldOptions.type=select时，下拉选择框的选项列表|
|fieldOptions.props|object|undefined|自定义其他属性项, v2.1.0 新增|


---

### g-table 方法暴露（通过 `defineExpose`）

| 方法名 | 参数 | 说明 |备注|
|-------|------|------|-----|
|setTableColumns|columns:Array|设置表格列同|v-model:table-columns|
|setTableOptions|options:object|设置表格选项同|v-model:table-options|
|setTableData|data:Array|设置表格数据同|v-model:table-data|
|setSelectedRowKeys|keys:Array|设置表格选中keys|同tableOptions.selectedRowKeys|
|setSelectedkeys|keys:Array or string|同setSelectedRowKeys|-|
|addSelectedKeys|keys:Array or string|添加选中keys|加入到tableOptions.selectedRowKeys|v2.0.7增加|
|setSearchKeyword|keyword:String|设置表格搜索关键字，并执行handleGeneralSearch|v2.0.4 修改|
|setSearchField|key:string,value:any|设置表格搜索字段|v2.1.0 增加|
|setSearchFields|values:object|设置多个表格搜索字段|v2.0.4增加，v2.1.0 修改参数|
|getTableColumns|-|获取表格列同|v-model:table-columns|
|getTableOptions|-|获取表格选项同|v-model:table-options|
|getTableData|-|获取表格数据同|v-model:table-data|
|refreshTable|-|刷新表格列及数据|-|
|refreshTableData|-|刷新表格数据|v2.0.4 增加|
|resetTable|-|重置表格选项、列及数据为{} 或 []|v2.0.7 增加|
|handleGeneralSearch|-|执行表格搜索|v2.0.4 增加|
|handleSearch|-|执行表格搜索,同handleGeneralSearch|v2.0.4 增加|
|setSearchKeyword|keyword:String|设置搜索关键字，并刷新表格数据|-|
|setVisibleColumns|columns:Array|设置可见列|-|
|getSelectionRows|-|获取已选行|-|
|getSelectedRowKeys|-|获取已选行key|-|
|getSelectedKeys|-|获取已选行key|-|
|clearSelection|-|清除已选行|-|
|toggleAllSelection|-|切换全选|-|
|toggleRowSelection|row:Object,selected:Boolean|切换单行选中状态|-|
|toggleCheckStrictly|-|切换父子节点选中状态，父子节点都选中时，父节点会处于选中状态，否则处于未选中状态|-|
|isEmpty|data:any (proxy,array,object,string..)|判断是否为空|-|
|isProxy|data:any|判断是否为proxy|-|
|deepClone|data:any|深度克隆|-|
|proxyToRaw|data:any|proxy转raw 同vue toRaw|-|
|print|-|打开组件打印设置框|重组打印或window.print()|

```
```

### g-table-options-editor 方法暴露（通过 `defineExpose`）

| 方法名 | 参数 | 说明 |
|-------|------|------|
|setTableColumns|columns:Array|设置表格列同v-model:table-columns|
|setTableOptions|options:object|设置表格选项同v-model:table-options|
|setTableData|data:Array|设置表格数据同v-model:table-data|
|getTableColumns|-|获取表格列同v-model:table-columns|
|getTableOptions|-|获取表格选项同v-model:table-options|
|getTableData|-|获取表格数据同v-model:table-data|
|getSummaryColumns|-|获取合计行字段列|

```
```
### g-table-columns-editor 方法暴露（通过 `defineExpose`）

| 方法名 | 参数 | 说明 |
|-------|------|------|
|setTableColumns|columns:Array|设置表格列同v-model:table-columns|
|setTableData|data:Array|设置表格数据同v-model:table-data|
|getTableColumns|-|获取表格列同v-model:table-columns|
|getTableData|-|获取表格数据同v-model:table-data|
|getSummaryColumns|-|获取合计行字段列|
```
```
## 🛠 开发者指南

### 本地运行

```bash
npm run dev
```

### 构建发布

```bash
npm run build
```

## cdn 引入示例 详见 test/gtable.html
```html
<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-06-15 18:52:53
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-06-27 09:28:11
 * @FilePath: \g-table\test\gtable.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>g-table 测试实例</title>
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="../dist/g-table-all.umd.js"></script>
<link rel="stylesheet" href="../dist/g-table-all.css" />
</head>
<body>
<div id="app">
    <g-table
	ref = "gtable1"
    v-model:table-options="tableOptions"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"
   >
   <!--
    @update:selected="onSelected"
    @update:current="onCurrent"
    @sort-change="onSortChange"
   -->
    <!-- 列 高级搜索  slot  start-->
    <template #slot-search-name="{ value,setValue }">
	  <el-input
      :model-value="value"
	  @input="setValue($event)"
      style="max-width: 600px"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" @click="handleGetSearchFields" />
      </template>
    </el-input>
   </template>
   <!-- 列 高级搜索  slot  end-->
   <!-- 列  slot start 需slotUsed = true -->
   <template #slot-name="{ row, column, $index }">
	  <span>{{ row['name'] }} YY</span>
	  <a :href="row.CHK_URL">{{ row.CHK_URL }}</a>
   </template>
   <template #slot-CHK_URL="{ row, column, $index }">
	  <a :href="row.CHK_URL">{{ row.CHK_URL }}</a>
   </template>
   <!-- 列  slot end -->
    <!-- action操作slot start -->
    <template #action="{ row, $index }">
      <el-button-group>
        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        <el-button size="small" @click="handleCopy(row)">复制</el-button>
      </el-button-group>      
    </template>
    <!-- action操作slot end -->
    <!-- toolbar  slot start-->
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleBatchDelete">删除</el-button>
      <el-button @click="getSelectRows">getSelect</el-button>
    </template>
    <!-- toolbar  slot end-->
  </g-table>
<!--
  <g-table-columns-editor
   key="ddd33" 
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData" 
  /> -->
  
 <!--  <g-table-options-editor 
    v-model:table-options="tableOptions"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData" /> -->
</div>

<script>
  const { ref, reactive, onMounted, nextTick, createApp } = Vue;
	const { GTable, GTableColumnsEditor, GTableOptionsEditor } = window.GTable; // or GTable 
	const { ElMessage } = ElementPlus;	

    const app = createApp({
      data() {
        return {
          tableOptions: {
            dataApi: '', // 数据源Api     http://localhost:5173/public/mockData.json
            rowKey: 'name', // 行唯一标识字段名
            pagination: true, // 是否分页
            showSummary: true, // 是否显示合计行
            summaryColumns: ['salary'], // 合计行字段名
            selectionType: 'multiple', // 选择类型
            selectedRowKeys: ['用户1','用户3'], // 已选行 rowKey字段的值
            options: {  // 其他配置项，没有列表里width等的自行添加
            border: true, // 是否显示边框
            stripe: true,  // 是否显示斑马纹
            pageSizes: undefined // 每页显示数量选择器选项 [10,20,50,100,200]
            },
            treeProps:{  // 树形结构配置项
            children: 'children', // 子级字段名
            hasChildren: 'hasChildren', // 是否有子级字段名（可选）
            checkStrictly: false, // 是否父子不关联
            },
            tableLayout:'fixed', // 表格布局
            showDefaultAdd: false, // 是否显示默认新增按钮
            showAdvancedSearch: true, // 是否显示高级搜索
            showRefresh: true, // 是否显示刷新按钮
            showColumns:true, // 是否显示列设置
            showExport: true, // 是否显示导出Excel按钮
            showImport: true, // 是否显示导入按钮
          },
          tableColumns: [
            { 
              columnId:0, // 列ID 方便列编辑时排序，不可重复
              prop: 'name',  // 字段名
              label: '姓名', // 列标题
              searchable: true, // 是否可搜索 自动按fieldOptions.type进行转换编辑框类型
              fieldOptions:{type: 'text'}, // 编辑框配置项 input date select number
              visible:true, // 是否显示
              resizable:true, // 是否可拖动列宽
              slotUsed:true, // 是否使用slot
            },
            { 
              columnId:1, 
              prop: 'gender', 
              label: '性别', 
              searchable: true,     
              fieldOptions:{type: 'select',options:[{label:'男',value:'1'},{label:'女',value:'2'}]},
              visible:false,
              resizable:true 
            },
            { 
              columnId:2, 
              prop: 'birthday', 
              label: '生日', 
              searchable: true, 
              fieldOptions:{type: 'datetimerange',format:'YYYY-MM-DD'},
              visible:true,
              resizable:true,
              formatterFn: `if (cellValue) { 
                const [year, month, day] = cellValue.split('-');
                return \`\${year}年\${month}月\${day}日\`;
                } else {
                return cellValue;
              }`
            },
            { 
              columnId:3, 
              prop: 'age', 
              label: '年龄', 
              searchable: true, 
              fieldOptions:{type: 'number'},
              visible:false,
              resizable:true 
            },
            { 
              columnId:4, 
              prop: 'salary', 
              label: '工资', 
              searchable: true, 
              fieldOptions:{type: 'number'},
              visible:true,
              resizable:true
            },
            { 
              columnId:10, // 列ID 方便列编辑时排序，不可重复
              prop: 'CHK_URL',  // 字段名
              label: '网址', // 列标题
              searchable: true, // 是否可搜索 自动按fieldOptions.type进行转换编辑框类型
              fieldOptions:{type: 'text'}, // 编辑框配置项 input date select number
              visible:true, // 是否显示
              resizable:true, // 是否可拖动列宽
              slotUsed:true
            },			  
            { 
              columnId:5, 
              prop: 'action', 
              type: 'action', 
              label: '操作', 
              slot: 'action', 
              width: 180,
              visible:true,
              resizable:true 
            }
          ]
        };
      },
      methods: {
        PostData(data,action='') {  //{data:data,methodMode:'',dataApi:''}
          const data1 = data.data || data || {};
          const methodMode = action || data.methedMode || 'add'; // 优先独立参数，再从data参数中获取
          const dataApi = data.dataApi || this.tableOptions.dataApi;
          axios.post(dataApi, {data:data1,type:methodMode})
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
        },
        handleAdd() {
          this.PostData({data:{},methedMode:'',dataApi:''})	
          ElMessage.success('新增');
        },
        handleEdit(row) {
          this.PostData({data:row,methedMode:'edit',dataApi:''})
          ElMessage.info('编辑：' + JSON.stringify(row));
        },
        handleDelete(row) {
          this.PostData({data:row,methedMode:'delete',dataApi:''})
          ElMessage.error('删除：' + JSON.stringify(row));
        },
        handleCopy(row) {
          // rowKey 如果 是自增等主键，需清0
          this.PostData({data:row,methedMode:'add',dataApi:''})
          ElMessage.warning('复制：' + JSON.stringify(row));
        },
        handleBatchDelete(){
          const ids = this.getSelectRowKeys(); // 或完整记录信息 this.getSelectRows()
          this.PostData({data:ids,methedMode:'batchDelete',dataApi:''})
          ElMessage.error('批量删除：' + JSON.stringify(ids));
        },
        getSelectRows() {
          console.log(this.$refs.gtable1.getSelectionRows());
          console.log(this.$refs.gtable1.getSelectionRowKeys());  // this.$refs.gtable1.getSelectionKeys
        },
        getSelectRowKeys() {
              console.log(this.$refs.gtable1.getSelectionKeys());
        },
        handleGetSearchFields(){
          console.log(this.$refs.gtable1.getSearchFields());
        }
        },
        onMounted() {
            //console.log(this.$listeners);
        },
    });

    // 注册组件挂载应用
    app.use(ElementPlus)
      .component('GTable', GTable)
      .component('GTableColumnsEditor', GTableColumnsEditor)
      .component('GTableOptionsEditor', GTableOptionsEditor)
      .mount('#app');
  </script>

</body>
</html>
```

## 更新日志
### 2025-07-01
1. 修改列设置使用el-tree组件，并独立封闭，改进多级列选择是否显示
2. 添加列编辑组件中数据渲染可选slot或简单格式化，简单格式化可调用高级检索设置的字段设置的内容
```js
<!--
比如性别要，显示男或女， 字段设置为
fieldOptions: {
        "type": "select",
        "options": [
          {
            "label": "男",
            "value": "1"
          },
          {
            "label": "女",
            "value": "2"
          }
        ]
      }
--> 
const option = column?.fieldOptions?.options.find(opt=>opt.value === cellValue);
return option ? option.label : cellValue;

// v2.0.1 new add getOption
return getOption(column?.fieldOptions?.options, cellValue,'默认值');
or
return getDict('gender',cellValue,'默认值') // 必须配置字典 :dict-datas="{'gender':{'1':'男','2':'女'}}"
or 
return getDict({'1':'男','2':'女'},cellValue,'默认值')

``` 
### 2025-07-02
1. 修正数据列slotUsed为true时，渲染slot内容不正确问题
2. 数据列增加配置项summaryType，默认合计行可选择 ['sum', 'avg', 'min', 'max', 'count', 'median','smax','smin']， 数字：合计sum、平均值avg、中位数median、最大值max、最小值min，文本：最大值smax、最小值smin，其他：计数count
3. 添加数据项编辑器合计行字段编辑框增加按钮自动从columns中获取需要合计的字段列表
4. 正式确认版本号: v2.0.0

### 2025-07-03 v2.0.1
1. 数据列编辑器增加生成测试数据功能，记录数可通过参数设置 testDataCount，默认为15
2. 数据列简单格式化中增加字典调用功能 增加getDict和getOption函数
```js
return getDict(dictCode, key, defaultValue); //optionsCode:string时调用props.dictDatas数据，object时直接调用optionsCode
return getOption(optionsCode, value, defaultLabel); // optionsCode:string时调用props.dictDatas数据，[object, object, object]时直接调用optionsCode数据
```
```json
const dictDatas={
  "dictCode1": {"1": "选项1", "2": "选项2"}, // return getDict('dictCode1', '1', ''); --> 选项1
  "gender": {"1": "男", "2": "女"}, // return getDict('gender', '3', '男');  --> 男
  "options1" : [{value: '1', label: '选项1'}, {value: '2', label: '选项2'}], // return getOption('options1', '1','选项3') --> 选项1
}
```

### 2025-07-04 v2.0.2
1. 增加showToolbar、showSearch、hasSubTable 属性
2. 增加子表功能，需要配置hasSubTable=true,并使用subTable插槽加g-table等组件,如果使用g-table组件，toolbar/action/slot-${prop}/插槽有效,但主表给出选择的数据时，不会直接取子表数据，需取子表数据：1) 需使用tree表，及主表数据加children字段； 2) [调用主表数据时，存储子表ref,再按g-table组件调用子表数据]](README.md#L307)。

### 2025-07-04 v2.0.3
1. 增加子表取数据实例，见App.vue

### 2025-07-11 v2.0.4
1. g-table增加暴露方法setSearchFields，用于插槽toolbar里自定增加dataApi查询内容
2. g-table增加暴露方法refreshTableData，仅更新表格数据，refreshTable更新表格列及数据
3. 增加高级检索设置-字段设置select\multiSelect字段选项：是否使用字典useDict，字典编码dictCode，来调用字典数据形成下单列表，同时getDict和getOption方法集成
```js
  // formatterFn中添加字典数据转换方法，
  // 第一个参数不等于true时(null,false,...)根据useDict和dictCode值获取字典数据
  // 如：
  return getDict(false, cellValue,'defaultValue');
  return getOption(false, cellValue,'defaultValue');
```
### 2025-07-12 v2.0.5
1. 检索字段post后台时，单独放在params.searchFields中，方便后台处理
2. 高检检索字段增加置工具栏onToolbar\工具栏上宽度width属性，用于区分是否放置工具栏或高级检索面板
3. 修复g-table-options-editor 组件变更属性预览不即时显示问题
4. 修复g-table-columns-editor 组件生成测试时因fieldOptions.type 为undefined 导致报错
---

### 2025-07-21 v2.0.6
1. 修复fixed不起作用问题,增加min-width属性及el-table-column v-if修改为v-show
2. 增加原生树形lazy和load / treeSubLoad, treeSubLoad优先于load
```vue
// 加载树形子数据
// 方式一
<g-table
  :table-options="tableOptions"
  :table-columns="tableColumns"
  :table-data="tableData"
  @treeSubLoad="handleTreeSubLoadInParent"
/>
const handleTreeSubLoadInParent = (row, treeNode, resolve) => {
  // 示例：异步加载子节点
  axios.get(`/api/children?parentId=${row.id}`).then(res => {
    resolve(res.data)
  })
}

方式二
const tableOptions = {
  lazy: true,
  rowKey: 'id',
  load: (row, treeNode, resolve) => {
    axios.get(`/api/children?parentId=${row.id}`).then(res => {
      resolve(res.data)
    })
  }
}
```
### 2025-07-23 v2.0.7
1. g-table-columns-editor修改默认生成的测试数据条数为5
2. g-table-options-editor载入默认设置,预览修改为tab-change事件中通过g-table组件setTableOptions等方法载入
3. g-table载入默认设置
4. g-table增加resetTable方法，清空表格table-options,table-columns,table-data


### 2025-08-01 v2.0.7
1. g-table formatterFn中使用getDict和getOption方法，当参数1dictCode非true时，按A.fieldOptions.useDict和fieldOptions.dictCode值获取字典数据,B.fieldOptions.options数据 顺序取值。
2. 修改vite.config.gtable-all.js 配置项，解决不能在gbk环境中使用问题。
3. g-table 增加addSelectedKeys方法，用于在原选中数据基础上添加新的数据。


### 2025-08-04 v2.0.8
1. 增加打印功能 print()，直接使用 window.print() 
2. 增加是否显示选择列、展开列、标题等参数，标题可以使用插槽tableTile自定义标题
3. 增加handleImport方法，用于导入数据框选择数据后确认导入处理

### 2025-08-06 v2.1.0
1. g-table优化高级检索表单，使用fieldOptions动态生成表单，并支持slot-search-${prop} 插槽
2. g-table增加fieldOptions.props，选填，对高级检索表单字段进行增强配置
3. g-table-columns-editor增加fieldOptions.props属性，对字段进行增强配置
4. g-table-columns-editor增加，增加按钮，用于添加字段
5. g-table-columns-editor增加，增加操作列
6. g-table-columns-editor修正未设置检索字段类型不生成测试数据问题

### 2025-08-07 v2.1.0
1. g-table增加暴露方法setSearchField，用于设置高级检索表单数据
2. g-table修改原setSearchFields的参数为object，一次设置多个字段

### 2025-08-14 v2.1.1
1. g-table增加 printSimple方法，用于打印去除样式表后简单表格，见utils/print.js
2. g-table打印对话框增加内容行排版方式选择，默认center

### 2025-09-14 v2.1.2
1. g-table增加 token字段，用于设置token
2. g-table增加 Authorization字段，用于设置请求头的Authorization字段
3. g-table增加 load-table-data属性，用于自定义加载数据，功能类似table-data

### 2025-09-16 v2.1.3
1. 增加左右侧布局功能 showLeftAside、showRightAside、leftAsideWidth、rightAsideWidth 属性，用于显示左右侧布局
2. 优化左右侧布局分隔面板

### 2025-11-17 v2.1.3
1. 全部el-select使用clearable属性,解决在webview中下el-select下拉框无限高问题

### 2025-11-18 v2.1.3
1. 修复showTitle和showToolbar属性，toolbar被覆盖问题

### 2025-11-19 v2.1.4
1. 修复字段名称大写时slot-${prop} 插槽无效问题，修改为不区分大小写
2. 优化g-table-columns-editor拖拽排序功能，字段时允许非同级拖拽，实现下级到上级，上级到下级，同级拖拽

### 2025-11-21 v2.1.5
1. 增加高级搜索框 daterange 和 datetimerange 两种编辑框
2. 优化slot-search-${prop} 插槽，父组件使用:model-value和@input 直接更新gtable组件查询参数
```html
<template #slot-search-name="{ value,setValue }">
	<el-input
      :model-value="value"
	    @input="setValue($event)"
      style="max-width: 600px"
      placeholder="Please input"
    />
</template>
```

### 2026-1-27 v2.1.6
1. 优化g-table.vue，左中右el-aside顶部对齐（缩小表格与工具栏间距）



---
## 🎉 未来计划
1. 优化代码逻辑
2. 同步升级pinia 版本
3. 国际化支持（i18n）
---

## 🎉 常见问题
| 问题 | 解决方案 |
| --- | --- |
|表格无法选择|检查rowKey是否正确|
|合计行未生效|检查summaryType或summaryMethod|
|使用refreshTable更新表数据较慢|refreshTable功能是重新配置表格、列数据及刷新数据，如果只是刷新数据，请使用refreshTableData|
|重组打印时多行表格只显示一行|检查打印框内【显示表格展开列】是否关闭|
|data-api方式取数据时不能使用get方式|请使用post方式，主要是方便后台取检索数据参数searchFields|

---

## 📎 贡献指南

欢迎贡献代码，请遵循以下步骤：

1. Fork 项目
2. 创建 feature 分支
3. 提交 PR 并描述修改内容
4. 等待 Review 合并

---

## 📬 联系我们

如有问题或建议，请提交 Issues 或联系维护者。

---