首页 > 其他分享 >element ui 如何在一行放置三个输入框和两个按钮

element ui 如何在一行放置三个输入框和两个按钮

时间:2023-09-12 14:44:07浏览次数:33  
标签:标签 button element 输入框 ui 按钮

代码示例:

<el-form :model="form" :rules="rules" label-width="80px" inline>
  <el-row>
    <el-col :span="6">
      <el-form-item label="First" word prop="first">
        <el-input v-model="form.first" placeholder="First"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Second" word prop="second">
        <el-input v-model="form.second"
          placeholder="Second"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Third" word prop="third">
        <el-input v-model="form.third" placeholder="Third"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">First button</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="success">Second button</el-button>
    </el-col>
  </el-row>
</el-form>

核心是使用element ui的<el-row>配合<el-col>进行布局;

使用<el-form>配合<el-form-item>可以给每个输入框前显示文本。

 

当然也可以直接将文本放在单独的<el-col>标签内。如果和<input>标签放在一个<el-col>标签内,会变形,需要自己调整样式。

标签:标签,button,element,输入框,ui,按钮
From: https://www.cnblogs.com/Tpf386/p/17696130.html

相关文章

  • android 很棒的UI合集 都是git地址很不错的需要makedown配合使用
    MaterialNameLicenseDemoMaterialDesignLibraryApacheLicenseV2DrawerArrowDrawableApacheLicenseV2MaterialTabsApacheLicenseV2PagerSlidingTabStripApacheLicenseV2material-rippleApacheLicenseV2RippleEffectMITLDrawerApacheLicenseV2material-design-icons......
  • pyautogui 屏幕倍率的坑
    在我的2倍屏设备上,鼠标移动不准确。直接上演示代码importpyautoguiscreenSize=pyautogui.size()print(screenSize)#输出:Size(width=1512,height=982)。这是屏幕尺寸,以dip(设备独立像素device-independentpixel)度量。buttonPoint=pyautogui.locateCenterOnScreen......
  • pyautogui locateCenterOnScreen和locateOnScreen不生效
    如果传入了正确的图片,却无法在屏幕中找到定位,则可能是因为权限问题,导致pyautogui无法获取到窗口截图。请参照:https://www.cnblogs.com/ZJT7098/p/17695865.html......
  • Mac执行pyautogui.screenshot()只能截取桌面背景
    明明有程序窗口在前台,却只获取到桌面背景。如果无法正确的获取截屏,那么pyautogui.locateCenterOnScreen或pyautogui.locateOnScreen等函数都无法正确执行。原因很简单,就是权限问题。应将屏幕录制权限开放给你的开发工具。这里我赋予Anaconda-Navigator和Terminal屏幕录制权......
  • Spring Boot - Parameter 0 of constructor in com.example.iocdi.controller.UserCon
    问题描述如上图所示,在加入了@MapperScan注解之后就出现了这个问题。file:[src/java/config/MybatisConfig.java]@Configuration@MapperScan("com.example.iocdi")publicclassMybatisConfig{}因为这个@MapperScan注解扫描了com.example.iocdi下面所有的包,而U......
  • POJ 2299 Ultra-QuickSort ---归并排序 求逆序
    归并排序的模板。能求逆序。。。。#include<stdio.h>#include<string.h>intn;longlonga[500005],b[500005];longlongsum;voidmerge(intl,intm,intr){ inti=l,j=m+1,k=0; while(i<=m&&j<=r) { if(a[i]<=a[j]) b[k++]=a[i++]; else......
  • Mac执行pyautogui.screenshot()时报错
    报错信息---------------------------------------------------------------------------TypeErrorTraceback(mostrecentcalllast)CellIn[3],line1---->1pyautogui.screenshot()File~/anaconda3/lib/python3.11/site-package......
  • opatch报补丁时,oui-patch.xml (Permission denied)报错
    前言一套19.19RAC环境,使用opatch工具安装数据库补丁,第一个节点成功安装,但在第二个节点执行opatch命令时报错。主要的错误有提示:/u01/app/oraInventory/ContentsXML/oui-patch.xml(Permissiondenied),具体如下所示。[grid@19crac235074478]$$ORACLE_HOME/OPatch/opatcha......
  • RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个D
    前言  前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用。<br>烧写buildroot固件  这部分更详细的参照《RK3568开发笔记(六):开发板烧写ubuntu固件(支持mipi屏)》的步骤,本质上烧写都是一样的,只是不同的update.img。步骤一:下载镜像  ......
  • RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个D
    前言  前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用。 烧写buildroot固件  这部分更详细的参照《RK3568开发笔记(六):开发板烧写ubuntu固件(支持mipi屏)》的步骤,本质上烧写都是一样的,只是不同的update.img。步骤一:下载......