vue2+ant-design-vue, 使用formily v2，写个带有筛选（输入框、选择框、单选、select封装的组件）和表格的示例出来；版本：package.json:@formily/core": "^2.3.2","@formily/vue": "^2.3.2","ant-design-vue": "^1.6.2","vue": "^2.5.22",

### Vue2 + Ant-Design-Vue + Formily V2 示例 以下是基于 `Vue2` 和 `Ant-Design-Vue` 的 `Formily V2` 实现的一个示例，包含筛选功能（输入框、选择框、单选按钮、Select 封装组件）以及表格展示。 #### 安装依赖 确保已安装以下依赖项： ```bash npm install [email protected] [email protected] @formily/[email protected] @formily/[email protected] ``` 如果遇到包管理器错误，请尝试清理缓存并重新安装[^4]: ```bash npm config set proxy null npm config set proxy false npm cache clean --force yarn cache clean ``` --- #### 示例代码 ##### 主文件 (`App.vue`) ```vue <template> <a-card title="筛选与表格"> <!-- 筛选区域 --> <formily-form :schema="filterSchema" /> <!-- 查询按钮 --> <div style="margin-top: 16px;"> <a-button type="primary" @click="handleSearch">查询</a-button> </div> <!-- 表格区域 --> <a-table :columns="tableColumns" :data-source="filteredData" bordered row-key="id" > <template #action="{ record }"> <span>编辑 | 删除</span> </template> </a-table> </a-card> </template> <script> import { createForm, Schema } from '@formily/core'; import { Form as FormilyForm } from '@formily/vue'; import { Input, Select, Radio } from 'ant-design-vue'; // 创建表单实例 const form = createForm(); export default { components: { FormilyForm, AInput: Input, ASelect: Select, ARadioGroup: Radio.Group, ARadioButton: Radio.Button, }, data() { return { filterSchema: new Schema({ properties: { name: { type: 'string', title: '名称', 'x-component': 'AInput', // 输入框 }, category: { type: 'string', enum: ['类别一', '类别二', '类别三'], title: '分类', 'x-component': 'ASelect', // 下拉框 }, status: { type: 'string', enum: [ { label: '启用', value: 'active' }, { label: '禁用', value: 'inactive' } ], title: '状态', 'x-component': 'ARadioGroup', // 单选按钮组 'x-component-props': { buttonStyle: 'solid' } }, }, }), tableColumns: [ { title: 'ID', dataIndex: 'id', key: 'id' }, { title: '名称', dataIndex: 'name', key: 'name' }, { title: '分类', dataIndex: 'category', key: 'category' }, { title: '操作', slots: { customRender: 'action' } }, ], rawData: [ { id: 1, name: '记录一', category: '类别一', status: 'active' }, { id: 2, name: '记录二', category: '类别二', status: 'inactive' }, { id: 3, name: '记录三', category: '类别三', status: 'active' }, ], }; }, computed: { filteredData() { const formData = this.form.values; let result = [...this.rawData]; if (formData.name) { result = result.filter(item => item.name.includes(formData.name)); } if (formData.category) { result = result.filter(item => item.category === formData.category); } if (formData.status) { result = result.filter(item => item.status === formData.status); } return result; }, }, methods: { handleSearch() { console.log('当前筛选条件:', this.form.values); }, }, }; </script> ``` --- ### 功能说明 1. **筛选功能** - 使用 `Formily` 构建动态表单，支持多种字段类型（如输入框、下拉框、单选按钮等），并通过绑定数据实现过滤逻辑[^1]。 2. **表格展示** - 基于 `Ant-Design-Vue` 的 `<a-table>` 组件渲染表格，并通过计算属性 `filteredData` 过滤显示的数据[^3]。 3. **交互设计** - 提供“查询”按钮触发筛选逻辑，同时保留原始数据以便重置或扩展其他功能。 --- ### 注意事项 - 如果运行过程中出现版本不兼容问题，请确认所使用的库版本是否匹配。例如，`@vitejs/plugin-vue` 需要 Vue 版本 >=3.2.13。 - 对于复杂场景下的性能优化，可以考虑分页加载或虚拟滚动技术来提升用户体验。 ---