Vue

Form 表单 官方文档：https://antdv.com/components/form-cn 问题：通过对象数据遍历表单组件，校验不生效或者校验不通过： 原因： rules必须加载<a-form-item>上，不能加载input、select等组件上，否则校验不生效 组件的v-model:value必须单独关联一个formdata对象中，不能直接使用原始数据对象，否则任何时候都显示校验提示，可以先将原始数据对象深拷贝到formdata对象中，然后再使用formdata对象进行校验，校验通过后再将formdata对象赋值给原始数据对象。 示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 // 原始表单数据对象 const formObject = ref({ name: { label: '分类名称', name: 'name', type: 'input', placeholder: '请输入分类名称', default: '默认数据', rules: [{ required: true, message: '请输入分类名称'}], }, status: { label: '状态', name: 'status', type: 'select', placeholder: '请选择状态', default: 1, options: [ { label: '启用', value: 1 }, { label: '禁用', value: 0 }, ], rules: [{ required: true, message: '请选择状态'}], }, }) // 表单数据存储对象 const formData = ref({}) // 原始数据对象深拷贝到表单数据存储对象中 const dataExtract = (data) => { Object.keys(data).forEach(key => { formData.value[key] = data[key].default }) } // 监听原始数据对象变化，将变化后的数据深拷贝到表单数据存储对象中 watch(formObject, (val) => { dataExtract(val) }, { immediate : true}) // 提取后的formData { name: '默认数据', status: 1, } Table 表格 官方文档：https://antdv.com/components/table-cn ...

本方案推荐使用axios-mock-adapter组件： 一、 安装 1 2 3 npm install axios --save npm install mockjs npm install axios-mock-adapter --save-dev 注意：axios和axios-mock-adapter版本要一致 axios-mock-adapter：https://www.npmjs.com/package/axios-mock-adapter mock：http://mockjs.com/ 二、应用案例 mock方法放在一个或多个文件中，比如use.js、article.js等 必须要实例化axios，否则会报错，实例化axios后，mock实例化时需要传入axios实例 导出mock方法，在业务中使用 1. 创建Mock方法 获取用户信息示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // src/mock/index.js import axios from 'axios' import Mock from "mockjs"; import MockAdapter from 'axios-mock-adapter' // 创建axios实例 const instance = axios.create();// 这一步很重要 // 创建mock实例 const mock = new MockAdapter(instance) // 模拟GET请求（固定数据） mock.onGet('/user').reply(200, { id: 1, username: 'admin' }) // 模拟GET请求（随机数据） mock.onGet('/user').reply(200, Mock.mock({ id: '@id', username: '@name' })) // 使用axios请求mock并导出结果 export const getUser = () => { return instance.get('/user'); } 获取文章信息示例： ...