首页 > 其他分享 >element-ui(Form 表单)

element-ui(Form 表单)

时间:2023-08-25 16:14:42浏览次数:36  
标签:Form 表单 ui 设置 组件 element true formName

在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

行内表单

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。设置 inline 属性可以让表单域变为行内的表单域

表单验证

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<template>
    // ref: 设置ref,用以获取该组件
    // rules:绑定设置的rule
    // prop: 设置的rule的规则属性名
      <el-form ref="addForm" :model="addAppParam" :rules="addRule" label-width="150px">
        <el-form-item label="微信openid" prop="wxOpenId" >
          <el-input v-model="addAppParam.wxOpenId" clearable style="width: 80%;"/>
        </el-form-item>
        <el-form-item label="小程序appid" prop="appId">
          <el-input v-model="addAppParam.appId" clearable style="width: 80%;"/>
        </el-form-item>
        <el-form-item label="小程序环境" prop="env">
          <el-select v-model="addAppParam.env" clearable >
            <el-option v-for="env in envOptions" :key="env.value" :value="env.value" :label="env.label"/>
          </el-select>
        </el-form-item>
      </el-form>
      // 调用submitForm方法,参数为组件的ref,校验该组件规则
      <el-button type="primary" @click="submitForm('addForm')">确 认</el-button>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      addAppParam: {
        wxOpenId: '',
        appId: '',
        env: ''
      },
      // 设置规则
      addRule: {
        wxOpenId: [
          { required: true, message: '请输入微信openid', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: '请输入小程序appid', trigger: 'blur' }
        ],
        env: [
          { required: true, message: '请输入小程序环境', trigger: 'blur' }
        ]
      },
    }
  },
  
  methods: {
  // 校验必填,固定写法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addAppInfo()
        } else {
          this.addDialogVisible = true
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
   }
</script>

 

标签:Form,表单,ui,设置,组件,element,true,formName
From: https://www.cnblogs.com/yjh1995/p/17657180.html

相关文章

  • 四、Docker Buildx 构建支持多系统架构的Docker镜像
    一、前言1.本文主要内容使用DockerBuldx构建支持AMD64、ARM、ARM64等架构的镜像并传送到DockerHub。2.环境支持安装Docker>=19.03该版本包含buildx,该功能仅适用于Dockerv19.03+版本。Linuxkernel>=4.8自该Linux内核版本binfmt_misc支持fix-binary(......
  • element-ui(table表格)
    当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。<el-table:data="tableData"style="width:100%"> <el-table-columnprop="date"label="日期"width="180&q......
  • uiautomator2 截图+压缩图片+放入allure报告中
    defsave_screenshot(self,screenshot_path):"""截图保存到某个路径:paramscreenshot_path::return:"""self.d.screenshot(screenshot_path) screenshot_path=f&quo......
  • element-ui
    安装npmielement-ui-S引入Element在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);new......
  • arduino上读取北斗+GPS双模定位模块的数据
    前言本周学习内容主要是实现在arduino上读取北斗+GPS双模定位模块的数据烧录程序及查看数据1.打开示例程序,选择arduinouno,串口号填USB的COM端口2.上传示例示例程序到uno板子上,点击右箭头就好。注意,这个时候不要接定位模块的串口,就是不要接线,会导致烧录失败。因为程序中......
  • 使用Iconfont制作字体图标库并引入到Element项目中
    1引子1.1图标的重要性图标用来描述某种具体的功能,能够使用户更轻松的理解信息、获取信息。好的图标设计易于被发现、易于被理解,且具有美感与吸引力,能够丰富用户体验。1.2字体图标的好处字体图标是一种特殊的字体,以图像的形式展现给用户。使用字体图标的好处有:相较于图片,字体图标......
  • ios开发之 -- UIView总结
    如果想调用某个类的某个方法可以写成这样,这个方法来自NSObject类performSelector:performSelector:withObject:performSelector:withObject:withObject: 实际调用[selfperformSelector:@selector(displayViews)withObject:nilafterDelay:1.0f];有三个方法分别是//父视图......
  • ios 开发之 -- UILabel的text竖行显示
    让UILabel的内容竖行显示,我经常用一下两种方式:第一种:使用换行符\nlabel.text=@"请\n竖\n直\n方\n向\n排\n列";label.numberOfLines=[label.textlength];第二种:使用lineBreakMode属性label.text=@"请竖行显示";label.lineBreakMode=NSLineBreakByWordWrapping;//换行模......
  • Extract Abends with OGG-01028 Non-Standard Redo Detected in 10g Compatible Forma
    ogg报错ExtractAbendswithOGG-01028Non-StandardRedoDetectedin10gCompatibleFormat抽取进程意外Abend手动重启恢复ExtractAbendswithOGG-01028Non-StandardRedoDetectedin10gCompatibleFormat(DocID1313864.1)根据文档修改添加这个参数'tranlo......
  • VisionPro C#调用QuickBuild操作
    在VisionPro中,常见的操作是:将产品多种型号分别定义成多个QuickBuild。(PS:产品A调用QuickBuild1,产品B调用QuickBuild2) 一个QuickBuild(JobManager)文件下可以包括若干个作业(Job),如果一个项目连接多个工业相机,那么可以将相机单独绑定到Job上。Job中可以包含采像工具、ToolBlock......