# arco-pro
**Repository Path**: li-cailing/arco-pro
## Basic Information
- **Project Name**: arco-pro
- **Description**: arco-pro vue3 ProTable TableList typescript组件 mock数据
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 9
- **Forks**: 3
- **Created**: 2023-06-27
- **Last Updated**: 2025-12-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 基于arco-design组件库vue3 ProTable、TableList组件
## 组件都是用 TypeScript 编写的、通过eslint、mock数据模拟真实操作
git链接: [https://github.com/licailing/arco-pro](https://github.com/licailing/arco-pro)
预览地址: [https://licailing.github.io/arco-pro/](https://licailing.github.io/arco-pro/)
# 运行
```bash
npm install
npm run serve
```
### TableList是基于ProTable高度封装的组件
#### 高级筛选-收起

#### 高级筛选-展开

#### 普通筛选-展开

#### 普通筛选-收起

#### 自定义表单部分

#### 搜素表单-表格-编辑弹框全部自定义


#### ProTable默认表单

#### 高级筛选及普通筛选代码实现
```vue
{{ $t(`searchTable.form.contentType.${record.contentType}`) }}
{{ $t(`searchTable.form.contentType.${record.contentType}`) }}
```
#### 自定义搜索表单、列表、编辑表单代码实现
```vue
{
if (!errors) {
formData.onSubmit(values);
}
}
"
>
{
formSearchRef.resetFields();
formData.onReset();
}
"
>
重置
提交
收起
{{ record.premitActionDesc }}
{
if (!errors) {
onSubmit(values);
}
}
"
>
取消
提交
```
# 相关链接
* [arco-design](https://arco.design/)
* [Arco Pro](https://arco.design/pro/)