当然可以！以下是一个适合你这个项目的 README.md 示例，适用于你的组件库或表格组件项目。

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

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

✅ 功能亮点

• 🧱 支持远程和本地数据源
• 🔍 通用关键字搜索 + 高级字段筛选
• 📋 列设置（显示/隐藏列）
• 📈 分页 & 排序支持
• 📥 插槽支持：工具栏、操作列、自定义列渲染等
• 🔄 数据刷新与状态保持
• 📐 多级表头支持（递归渲染）
• 📝 数据表属性可视化编辑
• 📝 数据列可视化编辑
• 📝 可通过sql语句生成数据列(create table/insert into/update)

✨ 特性

📦 技术栈

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

📁 目录结构

src/
├── components/
│   └── g-table.vue        # 主要表格组件
│   └── g-table-columns-editor.vue        # 表格数据列可视化编辑组件
│   └── g-table-options-editor.vue        # 表格属性和数据列可视化编辑组件，包括g-table-columns-editor.vue功能
├── utils/
│   └── utils.js           # 工具函数（SQL解析、生成测试数据等）
│   └── directive.js       # 数据列可视化编辑组件拖拽排序库
└── test/
    └── test.html           # 示例页面 功能同 App.vue

📦 安装使用

1. 安装依赖

npm install element-plus axios

2. 引入组件

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

<script setup>
import GTable from '@/components/g-table.vue'
import { ref } from 'vue'

const columns = ref([
  { prop: 'name', label: '姓名', searchable: true },
  { prop: 'age', label: '年龄', searchable: true },
])

const tableData = ref([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
])
</script>

📝 Props 说明

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | columns | Array | [] | 表头配置数组 | | data | Array | [] | 本地数据源 | | dataApi | String | '' | 远程接口地址 | | options | Object | {} | 表格配置项 border stripe pageSizes | | pagination | Boolean | true | 是否启用分页 | | showSummary | Boolean | false | 是否显示汇总行 | | summaryColumns | Array | null | 汇总行列名称数组 | | selectionType | String | 'multiple' | 选择类型（none/single/multiple） | | rowKey | String/Function | 'name' | 行唯一标识字段 | | treeProps | Object | {} | 树形结构配置 | | selectedRowKeys | Array | [] | 默认选中行 key 数组 |

💡 表格示例代码

使用本地数据 + 搜索功能

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

<script setup>
import GTable from '@/components/g-table.vue'
import { ref } from 'vue'

const columns = ref([
  { prop: 'name', label: '姓名', searchable: true },
  { prop: 'age', label: '年龄', searchable: true },
])

const tableData = ref([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
])
</script>

使用远程数据源

<template>
  <g-table :data-api="/api/list" :columns="columns"/>
</template>

数据列编辑器示例代码

<template>
<gtableColumnsEditor 
    :columns="columnsRef"
    @update:columns="updateColumnsRef"
    :retTestData="retTestData"
    @update:retTestData="updateRetTestData"
  />
 </template>

<script setup>
import gtableColumnsEditor from '@/components/g-table-columns-editor.vue'
import { ref } from 'vue'

// 编辑后返回的数据列
const updateColumnsRef = (val) => {
  columnsRef.value = val
  columns = val
}
// 表组件重新加载数据  仅在有表同时显示时有用
const refreshTable = () => { 
   gtable1.value.refreshTable();
}
</script>

⚙️ API 文档

方法暴露（通过 defineExpose）

| 方法名 | 参数 | 说明 | |-------|------|------| | setVisibleColumns(propsArray) | props数组 | 设置可见列 | | getSelectionRows() | - | 获取当前选中的行 | | clearSelection() | - | 清除选中 | | toggleAllSelection() | - | 全选/取消全选 | | toggleRowSelection(row, selected) | 行对象、是否选中 | 切换某一行的选中状态 | | handleDoLayout() | - | 手动触发表格布局重绘 | | refreshTable() | - | 刷新表格（重新加载数据） |

🛠 开发者指南

本地运行

npm run dev

构建发布

npm run build

完整示例，代码有点乱，见App.vue或test/test.html

<template>
  <gtable
    ref="gtable1"
    :columns="columnsRef"
    dataApi=""
    :data="tableData"
    :options="{ border: true, stripe: true, pageSizes:undefined }"
    :pagination="true"
    :showSummary="true"
    :summaryColumns="['age', 'salary']"
    selectionType="multiple"
    :selectedRowKeys="defaultSelectedRowKeys"
    rowKey="name"  
    @update:columns="updateColumnsRef"
    @handleAdd="handleAdd"
   >
   <!--   @update:selected="onSelected"
    @update:current="onCurrent"
    @sort-change="onSortChange"-->
    <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>
    <template #toolbar>
      <el-button @click="getSelectRows">getSelect</el-button>
      <el-button @click="refreshTable">刷新表格</el-button>
    </template>
  </gtable>

<el-divider content-position="left">表格列可视化设置工具</el-divider>

  <gtableColumnsEditor 
    :columns="columnsRef"
    @update:columns="updateColumnsRef"
    :retTestData="retTestData"
    @update:retTestData="updateRetTestData"
  />
  
</template>

<script setup>
import { ref,onMounted, nextTick} from 'vue'
import gtable from './components/g-table.vue'
import gtableColumnsEditor from './components/g-table-columns-editor.vue'
import { ElMessage } from 'element-plus'

var columns = [
  { 
    columnId:0, 
    prop: 'name', 
    label: '姓名', 
    searchable: true, 
    fieldOptions:{type: 'text'},
    visible:true,
    resizable:true
  },
  { 
    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: 'date',format:'YYYY-MM-DD'},
    visible:true,
    resizable:true,
    formatterFn: `
      const [year, month, day] = cellValue.split('-');
      return \`\${year}年\${month}月\${day}日\`;
    `
  },
  { 
    columnId:3, 
    prop: 'age', 
    label: '年龄', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:false,
    resizable:true 
  },
  { 
    columnId:2, 
    prop: 'salary', 
    label: '工资', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:true,
    resizable:true 
  },  
  { 
    columnId:4, 
    prop: 'action', 
    type: 'action', 
    label: '操作', 
    slot: 'action', 
    width: 180,
    visible:true,
    resizable:true 
  }
]

const columnsRef=ref([...columns])

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 defaultSelectedRowKeys = ref(['用户1', '用户3']) 
const handleAdd = () => {
  ElMessage.success('新增')
}
const handleEdit = (row) => {
  ElMessage.info('编辑：' + row.name)
}
const handleDelete = (row) => {
  ElMessage.error('删除：' + row.name)
}
const handleCopy = (row) => {
  ElMessage.warning('复制：' + row.name)
}
const gtable1 = ref()
const getSelectRows = () => {  
  console.log(gtable1.value.getSelectionRows())
  ElMessage.warning('给出选择记录：' + JSON.stringify(gtable1.value.getSelectionRows()))
}

const updateColumnsRef = (val) => {
 // console.log('updateColumnsRef:', val)
  columnsRef.value = val
  columns = val
}
const retTestData=ref([]) // 用于接收gtableColumnsEditor组件根据SQL生成的测试数据
const refreshTable = () => {
  gtable1.value.refreshTable();
}
const updateRetTestData = (val) => {
  retTestData.value = val
  tableData.value = val
  nextTick(() => { 
    refreshTable()
  })
  
}

onMounted(() => {
  // console.log('columnsRef.value:', columnsRef.value)
// ./src/components/mockData.json
})


</script>

📎 贡献指南

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

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

📬 联系我们

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