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

Posted 2020-11-16 iwishicould

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: ""
        };
      }
    },
  }