行内表单在统一行显示搜索框下拉框按钮-阿里云开发者社区

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

2022-05-10 298

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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