# EditTable 可编辑表格组件

## 功能概述

EditTable 是一个功能强大的可编辑表格组件，支持多种字段类型和验证规则，专为Vue 3 + TypeScript + Element Plus环境设计。

## 文件结构

```
src/components/EditTable/
├── index.vue              # 主组件文件
├── index.ts               # 入口文件
├── types.ts               # TypeScript类型定义
├── helpers.ts             # 辅助函数和字段创建器
├── README.md              # 详细文档
└── examples/              # 示例文件
    ├── BasicExample.vue   # 基础示例
    ├── AdvancedExample.vue# 高级示例
    └── Demo.vue           # 完整演示
```

## 支持的字段类型

### 基础字段类型
- **INPUT**: 文本输入框
- **NUMBER**: 数字输入框
- **DATE**: 日期选择器
- **DATE_RANGE**: 日期范围选择器

### 选择器类型
- **SELECT**: 普通单选选择器
- **MULTI_SELECT**: 多选选择器
- **REMOTE_SELECT**: 远程搜索选择器
- **FILTER_SELECT**: 带筛选的选择器

### 树形选择器类型
- **TREE_SELECT**: 树形单选选择器
- **TREE_MULTI_SELECT**: 树形多选选择器
- **TREE_REMOTE_SELECT**: 树形远程搜索选择器
- **TREE_FILTER_SELECT**: 树形筛选选择器

### 自定义渲染
- **自定义字段**: 支持使用render函数自定义渲染任何内容

## 核心特性

✅ **完整的TypeScript支持**: 提供完整的类型定义和类型检查  
✅ **灵活的字段配置**: 支持各种字段类型和自定义配置  
✅ **表单验证**: 内置表单验证机制，支持必填、自定义规则  
✅ **远程搜索**: 支持远程数据搜索和懒加载  
✅ **树形数据**: 完整支持树形选择器  
✅ **自定义渲染**: 支持render函数自定义渲染  
✅ **响应式设计**: 适配不同屏幕尺寸  
✅ **事件系统**: 完整的事件回调系统  
✅ **方法暴露**: 暴露验证、添加、删除等方法  

## 快速开始

### 1. 基础用法

```vue
<template>
  <EditTable
    v-model="tableData"
    :config="tableConfig"
    :empty-row="getEmptyRow"
  />
</template>

<script setup>
import EditTable from '@/components/EditTable/index.vue'
import { createInputField, createNumberField } from '@/components/EditTable/helpers'

const tableData = ref([])
const tableConfig = {
  fields: [
    createInputField('name', '姓名', { required: true }),
    createNumberField('age', '年龄')
  ]
}

const getEmptyRow = () => ({
  name: '',
  age: undefined
})
</script>
```

### 2. 在BOM表单中的使用

已将BOMForm.vue重构为使用EditTable组件：

```vue
<!-- 明细表格 -->
<EditTable
  ref="editTableRef"
  v-model="detailList"
  :config="detailTableConfig"
  title="BOM明细"
  addButtonText="添加明细"
  :empty-row="getEmptyDetailRow"
  @add="handleDetailAdd"
  @delete="handleDetailDelete"
/>
```

## 辅助函数

组件提供了丰富的辅助函数来快速创建字段：

```javascript
// 创建字段
createInputField(prop, label, options)
createNumberField(prop, label, options)
createSelectField(prop, label, options)
createTreeSelectField(prop, label, options)

// 设置属性
setRequired(field, message)
setDisabled(field, disabled)
setReadonly(field, readonly)

// 验证规则
ValidationRules.required(message)
ValidationRules.email
ValidationRules.phone
ValidationRules.min(min, message)
ValidationRules.max(max, message)
```

## 事件处理

```vue
<EditTable
  v-model="data"
  :config="config"
  @add="handleAdd"
  @delete="handleDelete"
  @validate="handleValidate"
/>
```

## 方法调用

```javascript
const editTableRef = ref()

// 验证表单
await editTableRef.value.validate()

// 验证单个字段
await editTableRef.value.validateField(0, 'name')

// 添加/删除行
editTableRef.value.addRow()
editTableRef.value.deleteRow(0)
```

## 高级功能

### 1. 远程搜索

```javascript
createRemoteSelectField('user', '用户', async (query) => {
  const response = await api.searchUsers(query)
  return response.data.map(user => ({
    label: user.name,
    value: user.id
  }))
})
```

### 2. 自定义渲染

```javascript
createCustomField('status', '状态', (row, field, index) => {
  return h(ElTag, {
    type: row[field.prop] === 'active' ? 'success' : 'danger'
  }, row[field.prop] === 'active' ? '激活' : '禁用')
})
```

### 3. 树形选择器

```javascript
createTreeSelectField('department', '部门', {
  options: departmentTree,
  checkStrictly: true,
  filterable: true
})
```

## 使用建议

1. **数据结构**: 确保每行数据包含所有配置的字段
2. **验证规则**: 合理设置必填字段和验证规则
3. **性能优化**: 对于大数据量，建议设置maxHeight和分页
4. **用户体验**: 合理使用placeholder和clearable属性
5. **类型安全**: 充分利用TypeScript类型检查

## 扩展性

组件设计高度可扩展，支持：

- 自定义字段类型
- 自定义验证规则
- 自定义渲染函数
- 事件钩子函数
- 样式定制

## 维护说明

- 组件文件位于 `src/components/EditTable/`
- 类型定义在 `types.ts` 中
- 辅助函数在 `helpers.ts` 中
- 示例代码在 `examples/` 目录中
- 详细文档在 `README.md` 中

## 版本兼容性

- Vue 3.x
- Element Plus 2.x
- TypeScript 4.x+