首页 > 其他分享 >abp-vnext-pro 实战(九,前端vue和vben学习)

abp-vnext-pro 实战(九,前端vue和vben学习)

时间:2023-08-24 22:46:38浏览次数:141  
标签:vnext vue vben formModel value field options componentProps

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

相关文章

  • vue2的源码github下载和本地启动调试源码
    1.下载源码:https://github.com/vuejs/vue2.安装依赖,命令行执行:yarn3.修改package.json的运行脚本scripts里面加上源码map定位的参数,在打包后页面引入使用时可以调试到源码: {"name":"vue",。。。"scripts":{//增加一个start的启动命令加入参数--sourcemap......
  • Vue动态创建组件实例并挂载到body
    方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops组件实例中的prop*/exportfunctioncreate(Component,props){constcomp=new(Vue.extend(Component))({propsData:props}).$mount()document.body.appendChild(......
  • VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)
    准备工作:安装 yarninstall vue-quill-editormain.js//编辑器importVueQuillEditorfrom'vue-quill-editor'//引入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'......
  • vue实现大文件上传下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • vue中,一个参数是一个图片网络地址,当重新上传一个图片替换原来的图片后,地址没变,但是图
    这个问题可能是由于浏览器缓存导致的。为了解决这个问题,你可以向图片的URL地址中添加一个随机参数,以确保每次加载图片时都会从服务器获取最新的图片。你可以使用类似于以下方式来添加随机参数:<img:src="imageUrl+'?timestamp='+Date.now()"/>这样,每次你更新了图片后,URL中......
  • Vue组件缓存之keep-alive正确使用姿势
    先来看一个项目中的需求作为苦逼的前端开发者,我们无时无刻都要面对产品经理提的各种需求,比如下图这个场景场景:从首页的点击导航进入列表页,列表页点击列表进入该数据详情页从详情页返回,希望列表页缓存,不重新渲染数据,这样会提高用户体验。分析一下这样需求,如果是小程序......
  • Electron,VUEJS3,Vite,TypesSript 开发环境配置
    Electron,VUEJS3,Vite,TypesSript开发环境配置项目早期是vue3+vite开发的,后期由于运营需求,要修改为Win安装包。方案还是比较多的:1.WPF-Webview由于目前只需要兼容win,所以可以选择WPF,但WPF需要WebView的,还需要本地架设服务。整体部署比较复杂以及需要熟悉C#与WPF相关开发。2.......
  • vue3 使用 setup 语法糖时,keep-alive 缓存使用 include / exclude 获取组件名
    <template><router-viewv-slot="{Component,route}"><keep-alive:include="['ComponentName']"><component:is="Component":key="route.name"/></keep-alive>......
  • Vue【原创】数据可视化,复合数字形式展示
    做数据可视化的时候,经常碰到需要很灵活的数字形式展示。先上个效果图: 如图包括名称,数量,别名,单位,上升下降,环比等等的复合数据展示,并且需要支持样式灵活配置。此组件包括2个模块,父容器组件box-group,其中每一项的子组件box。 父组件box-group1<template>2<divcl......
  • vue3 报错:husky - pre-commit hook exited with code 1 (error)
    问题:git提交不上去解决方法:   "format":"prettier--write\"./**/*.{html,vue,ts,js,json,md}\"",......