vben效果 Vben Admin (vvbin.cn) 对应的代码在 vue-vben-admin/src/views/demo/page/form/basic/data.ts at main · vbenjs/vue-vben-admin (github.com)
{ field: 'time', component: 'RangePicker', label: '起止日期', colProps: { span: 18 }, required: true, }, { field: 'weights', component: 'InputNumber', label: '权重', colProps: { span: 18 }, subLabel: '( 选填 )', componentProps: { formatter: (value: string) => (value ? `${value}%` : ''), parser: (value: string) => value.replace('%', ''), placeholder: '请输入', } },
Typescript 基础:(number,any,string) TypeScript 基础类型
多余的空格,回车要删除,用逗号分隔每行参数的,最后一行也要带逗号。
colProps: { span: 18 }, 一行分成24格,18意味着宽度=18/24
搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
响应式对象是一个什么对象 (qq.com)
浅谈Vue3响应式原理与源码解读
Vue3 写了 hook 三天,治好了我的组件封装强迫症
vue3中defineComponent 的作用详解
例子: 国家和省份联动,都是从后端取数据,国家设默认值china。
{ field: 'country', component: 'ApiSelect', label: '国家', required: true, componentProps: ({ formModel, formActionType }) => { return { // more details see /src/components/Form/src/components/ApiSelect.vue api: countryAsync, resultField: 'list', labelField: 'displayText', valueField: 'code', // not request untill to select immediate: true, onChange: (selectValue, result) => { console.log('ApiSelect====>:', selectValue,result); console.log(formModel.country); formModel.stateProvince = undefined; // reset state value const { updateSchema } = formActionType; updateSchema({ field: 'stateProvince', componentProps: { api: provinceAsync, params: { countryId: selectValue, }, labelField: 'displayText', valueField: 'code', immediate: true, }, }); }, // atfer request callback 取数据后调用 onOptionsChange: (options) => { console.log('onOptionsChange',formModel.country); const { updateSchema } = formActionType; updateSchema({ field: 'stateProvince', componentProps: { api: provinceAsync, params: { countryId: formModel.country, }, labelField: 'displayText', valueField: 'code', immediate: true, }, }); console.log('get options', options.length, options); }, }; }, colProps: { span: 18, }, defaultValue: '46', }, { field: 'stateProvince', component: 'ApiSelect', label: '省份', colProps: { span: 18, }, componentProps: { options: [], // defalut [] placeholder: '省份与国家联动', }, },
apiSelect和apiTreeSelect组件作为编辑组件时,本来的设计是用于那些仅有新增行的表格。如果你的table不仅用于新增行,还需要编辑已有数据,请使用Select和TreeSelect并自行填充options、treeData,
apiSelect、apiTreeSelect不适合此场景
===========================vben 还不知道编辑怎么写==========================
这个是另一个项目的写法
<el-form-item prop="principalUserId" label="负责人"> <el-select style="width: 100%" v-model="taskForm.principalUserId" filterable placeholder="请选择" :disabled="disabledPrincipal" > <el-option v-for="item in userOption" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item>
前端模拟数据 数据 mock&联调 模拟数据的语法参考 https://hub.nuaa.cf/nuysoft/Mock/wiki
路径在 \vben28\mock\demo\system.ts 里面 例如账号列表
const accountList = (() => { const result: any[] = []; for (let index = 0; index < 20; index++) { result.push({ id: `${index}`, account: '@first', email: '@email', nickname: '@cname()', role: '管理员', createTime: '@datetime', remark: '@cword(10,20)', 'status|1': ['0', '1'], }); } return result; })();