526互联

abp-vnext-pro 实战（九，前端vue和vben学习）

发布时间 2023-08-24 22:34:28作者: Gu

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: '省份与国家联动',
    },
  },