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: '请输入', } },
基础表单 - Vben Admin (vvbin.cn)
Typescript 基础:(number,any,string) TypeScript 基础类型
多余的空格,回车要删除,用逗号分隔每行参数的,最后一行也要带逗号。
例子: 国家和省份联动,都是从后端取数据,国家设默认值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: '省份与国家联动', }, },
标签:vnext,vue,vben,formModel,value,field,options,componentProps From: https://www.cnblogs.com/zitjubiz/p/17646771.html