Vue3+Ts结合ant-design+tailwindcss来实现一个复杂表格数据的渲染，包括查看和表格表单提交

### 在 Vue2 和 ant-design-vue 中集成 Formily 为了在基于 Vue2 和 ant-design-vue 的项目中成功集成 Formily，需按照特定的操作流程执行。这不仅涉及安装必要的依赖包，还包括配置和初始化工作。 #### 安装依赖项 首先，在命令行工具中进入项目根目录并执行如下 npm 命令来安装所需的软件包： ```bash npm install @formily/vue formily-antdv@next --save ``` 此命令会下载 `@formily/vue` 及其适配器 `formily-antdv` 到当前工程里[^1]。 #### 修改 main.js 文件 接着修改项目的入口文件 `main.js` 或者对于 TypeScript 用户来说可能是 `main.ts` ，添加以下代码片段用于注册 Formily 插件以及设置主题样式: ```javascript import Vue from &#39;vue&#39;; // 导入 Ant Design Vue 组件库及其默认样式表 import Antd from &#39;ant-design-vue&#39;; import &#39;ant-design-vue/dist/antd.css&#39;; // 导入 Formily 核心模块与 AntDv 适配层 import { createForm, setValidateMessages } from &#39;@formily/core&#39;; import { FormProvider, Field } from &#39;@formily/vue&#39;; import { FormItem as AFormItem, Input as AInput, Select as ASelect } from &#39;formily-antdv&#39;; Vue.config.productionTip = false; Vue.use(Antd); const form = createForm(); setValidateMessages({ required: &#39;${label} 不可为空&#39;, }); new Vue({ render(h){ return ( <FormProvider form={form}> {/* 应用程序其他部分 */} </FormProvider> ) } }).$mount(&#39;#app&#39;); ``` 这段脚本完成了几个重要任务：创建了一个新的 Form 实例；设置了验证消息模板；最后把整个应用程序包裹在一个 `<FormProvider>` 组件内部以使所有子组件都能访问同一个共享状态对象 `form`. #### 使用 Formily 表单控件 现在可以在任何页面或者组件里面像这样声明式地定义复杂的数据输入界面了： ```html <template> <a-form-model :model="formData"> <!-- 文本框 --> <AFormItem name="username" label="用户名"> <Field name="username" decorator="[AFormItem]" component="{...AInput}" /> </AFormItem> <!-- 下拉菜单 --> <AFormItem name="gender" label="性别"> <Field name="gender" decorator="[AFormItem]" component="{...ASelect}"> <ASelect.Option value="male">男</ASelect.Option> <ASelect.Option value="female">女</ASelect.Option> </Field> </AFormItem> <!-- 提交按钮 --> <button type="submit"@click.prevent="handleSubmit()">提交</button> </a-form-model> </template> <script> export default { data() { return { formData: {}, }; }, methods:{ handleSubmit(){ this.$refs.form.validate().then(values => console.log(&#39;success&#39;, values)).catch(error => console.error(&#39;error&#39;, error)); } } }; </script> ``` 以上 HTML 结构展示了如何利用 Formily 来简化表单项的渲染逻辑，并且保持良好的语义化标签结构[^4].