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