#### select - 下拉选择

`typescript
const formConfig = defineOption([
{
field: 'status',
t: 'select',
label: '状态',
options: [
{ label: '启用', value: 1 },
{ label: '禁用', value: 0 },
],
clearable: true,
filterable: true,
},
]);
`

#### select-v2 - 虚拟化下拉选择

`javascript
const formConfig = defineOption([
{
field: 'user',
t: 'select-v2',
label: '用户',
options: largeUserList,
placeholder: '请选择用户',
filterable: true,
},
]);
`

#### cascader - 级联选择

`javascript
const formConfig = defineOption([
{
field: 'region',
t: 'cascader',
label: '地区',
options: regionData,
props: { value: 'code', label: 'name', children: 'children' },
filterable: true,
showAllLevels: false,
},
]);
`

#### tree-select - 树形选择

`javascript
const formConfig = defineOption([
{
field: 'department',
t: 'tree-select',
label: '部门',
data: treeData,
props: { value: 'id', label: 'name', children: 'children' },
multiple: true,
checkStrictly: true,
},
]);
`

#### radio-group - 单选框组

`javascript
const formConfig = defineOption([
{
field: 'gender',
t: 'radio-group',
label: '性别',
options: [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' },
],
},
]);
`

#### checkbox-group - 多选框组

`javascript
const formConfig = defineOption([
{
field: 'hobbies',
t: 'checkbox-group',
label: '爱好',
options: [
{ label: '阅读', value: 'reading' },
{ label: '运动', value: 'sports' },
{ label: '音乐', value: 'music' },
],
},
]);
`

$3

#### date-picker - 日期选择

`javascript
const formConfig = defineOption([
{
field: 'birthday',
t: 'date-picker',
label: '生日',
type: 'date',
placeholder: '选择日期',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
},
]);
`

#### time-picker - 时间选择

`javascript
const formConfig = defineOption([
{
field: 'meetingTime',
t: 'time-picker',
label: '会议时间',
placeholder: '选择时间',
format: 'HH:mm:ss',
valueFormat: 'HH:mm:ss',
},
]);
`

#### time-select - 时间选择器

`javascript
const formConfig = defineOption([
{
field: 'startTime',
t: 'time-select',
label: '开始时间',
placeholder: '选择时间',
start: '08:30',
end: '18:30',
step: '00:15',
},
]);
`

$3

#### switch - 开关

`javascript
const formConfig = defineOption([
{
field: 'enabled',
t: 'switch',
label: '启用',
activeText: '开',
inactiveText: '关',
activeValue: 1,
inactiveValue: 0,
},
]);
`

#### slider - 滑块

`javascript
const formConfig = defineOption([
{
field: 'volume',
t: 'slider',
label: '音量',
min: 0,
max: 100,
step: 1,
showInput: true,
},
]);
`

#### rate - 评分

`javascript
const formConfig = defineOption([
{
field: 'rating',
t: 'rate',
label: '评分',
max: 5,
allowHalf: true,
showScore: true,
},
]);
`

#### color-picker - 颜色选择

`javascript
const formConfig = defineOption([
{
field: 'themeColor',
t: 'color-picker',
label: '主题色',
showAlpha: true,
predefine: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
},
]);
`

#### upload - 文件上传

`javascript
const formConfig = defineOption([
{
field: 'files',
t: 'upload',
label: '附件',
action: '/api/upload',
multiple: true,
limit: 5,
accept: '.jpg,.jpeg,.png,.gif',
listType: 'picture-card',
},
]);
`

#### custom-render - 自定义渲染

`javascript
const formConfig = defineOption([
{
field: 'customField',
t: 'custom-render',
render: ({ plain }) => {
function onClick() {
if (!plain.checked.value) return plain.checked.value = 1;
++plain.checked.value;
}
return () => {
return (


`typescript
const formConfig = defineOption(({ query }) => [
{
field: 'email',
t: 'input',
label: '邮箱',
placeholder: '请输入邮箱',
// 静态属性
clearable: true,
// 动态属性，根据表单其他字段的值动态设置
disabled: !query.username,
placeholder: query.username ? '请输入邮箱' : '请先输入用户名',
},
]);
`

$3

`tsx
const formConfig = defineOption([
{
field: 'password',
t: 'input',
label: '密码',
type: 'password',
showPassword: true,
// 表单项插槽
itemSlots: {
label: () => (

密码


),
suffix: () => 生成密码,
},
},
]);
`

$3

`typescript
const formConfig = defineOption([
{
field: 'city',
t: 'select',
label: '城市',
depend: true,
dependFields: 'province',
async getOptions(cb, query) {
try {
const cities = await fetchCities(query.province);
cb(cities);
}
catch (error) {
console.error('获取城市数据失败:', error);
cb([]);
}
},
},
]);
`

$3

`typescript
const formConfig = defineOption([
{
field: 'userInfo',
t: 'group',
label: '用户信息',
config: [
{
field: 'username',
t: 'input',
label: '用户名',
},
{
field: 'email',
t: 'input',
label: '邮箱',
},
],
},
]);
`

$3

`tsx
const formConfig = defineOption([
{
field: 'users',
t: 'dynamic-group',
label: '用户列表',
config: ({ item, index }) => ([
{
field: 'name',
t: 'input',
label: '姓名',
placeholder: '请输入姓名',
},
{
field: 'age',
t: 'input-number',
label: '年龄',
min: 0,
max: 120,
},
]),
itemSlots: {
append: ({ checked, index }) => (
checked.splice(index, 1)} type="danger" size="small">
删除

),
},
slots: {
append: ({ query }) => (
query.users.push({ name: '', age: 0 })} type="primary">
添加用户

),
},
},
]);
`

$3

`typescript
const formConfig = defineOption([
{
field: 'country',
t: 'select',
label: '国家',
options: countryList,
},
{
field: 'province',
t: 'select',
label: '省份',
depend: true,
dependFields: 'country',
getOptions: async (cb, query) => {
const provinces = await fetchProvinces(query.country);
cb(provinces);
},
},
]);
`

$3

`typescript
const formConfig = defineOption([
{
t: 'input',
field: 'password',
label: '密码',
rules: [
{ required: true, message: '密码不能为空' },
{ min: 6, message: '密码不能少于6位' },
{
validator: async (rule, value, callback) => {
const response = await checkPasswordStrength(value);
if (!response.strong) {
callback(new Error('密码强度不够'));
}
else {
callback();
}
},
},
],
},
]);
`

🗂️ 目录结构

`
packages/element-plus/
├── index.ts # 入口文件
├── components/ # 组件实现
│ ├── index.ts # 组件导出
│ ├── wrapper/ # 表单容器
│ ├── input/ # 输入框组件
│ ├── select/ # 下拉框组件
│ ├── cascader/ # 级联选择组件
│ └── ... # 其他组件
├── docs/ # 文档
│ ├── index.md # 文档首页
│ ├── examples/ # 示例
│ └── options/ # 配置选项
├── src/ # 源码
│ ├── index.ts # 源码入口
│ └── utils.ts # 工具函数
└── README.md # 文档
`

🔧 开发指南

$3

- Vue 3.0+
- Element Plus 2.x
- TypeScript 4.0+

$3

1. 在 components/ 目录下创建组件目录
2. 实现组件逻辑, 继承基础属性
3. 在 components/index.ts` 中导出
4. 更新文档和示例

🌟 在线示例

- Vue 3 + Element Plus 示例

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

- 项目主页
- 核心模块
- Element UI 版本