行内表单 在统一行显示搜索框 下拉框 按钮

Posted iwishicould

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了行内表单 在统一行显示搜索框 下拉框 按钮相关的知识,希望对你有一定的参考价值。

05===》 在同一行显示 搜索表单 下拉框表单 搜索按钮 清空按钮 使用了【行内表单】

inline 属性可以让表单域变为行内的表单域 (让表单显示在同一行)
<el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline"></el-form>

demo-form-inline是自带的
formInline是一个对象,用来存储值的


06==》下拉选项
<el-form-item label="学科:">
<el-select v-model="formInline.discipline" placeholder="不限" style="width: 200px;">
<el-option
v-for="item in discipline"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>

:label="item.name"==》label是给用户看见的值 name是后台的字段名,跟后台一致
:value="item.id"==》value是传递给后台的值
:key="item.id"==》提高渲染速度,用于vue标识

 

<template>
  <div>
   
   <!-- 搜索区域 -->
    <div>
      <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.account" placeholder="请输入账号查询"></el-input>
        </el-form-item>
        <el-form-item label="学科:">
          <el-select v-model="formInline.discipline" placeholder="请选择" style="width: 200px;">
            <el-option
              v-for="item in discipline"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <button class="primary-btn" @click="search(1)">查询</button>
          <button class="clear-btn" @click="search(2)">清空</button>
        </el-form-item>
      </el-form>
    </div>
   <!-- end -->
  </div>
</template>

 

 //查询表单  
      formInline: {
          account: "",
          discipline: ""
      },
        discipline: [{
          id: ‘1‘,
          name: ‘黄金糕‘
        }, {
          id: ‘2‘,
          name: ‘双皮奶‘
        }, {
          id: ‘3‘,
          name: ‘蚵仔煎‘
        }, {
          id: ‘4‘,
          name: ‘龙须面‘
        }, {
          id: ‘5‘,
          name: ‘北京烤鸭‘
        }],

 

  methods: {
    // 搜索表单中的方法
    search(val) {
      if (val == 1) {
       console.log("哈哈")
      } else if(val == 2) {
        this.formInline = {
          account: "",
          discipline: ""
        };
      }
    },
  }

 

技术图片

 

以上是关于行内表单 在统一行显示搜索框 下拉框 按钮的主要内容,如果未能解决你的问题,请参考以下文章

HTMLHTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )

如何在jsp中使用下拉列表、文本框和搜索按钮获取数据

layui表单如何提交下拉框的键值

当组合框有焦点时显示下拉列表

带有用户表单上的建议列表的可搜索组合框

html: 表单一些常见的输入框