搜索框展开、关闭
<el-row class="Jcommon-search-box" :gutter="16">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-col :span="6">
<el-form-item
label="适用合同类型"
prop="contractType"
label-width="88"
>
<el-cascader
popper-class="popper"
v-model="queryParams.contractType"
:options="contractTypeDropDownData"
:props="{
children: 'children',
label: 'name',
value: 'id',
checkStrictly: true,
}"
clearable
></el-cascader>
</el-form-item>
</el-col>
通过 searchBtnShow 来判断是否需要收起/展开
<el-col :span="6" v-if="searchBtnShow">
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
size="small"
style="width: 100%"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</el-col>
展开/收起的按钮
<el-col :span="6">
<el-form-item>
<el-button type="text" size="mini" @click="showAllBtn">
{{ searchBtnText }}
<i
class="el-icon-arrow-down el-icon--right"
v-if="!searchBtnShow"
></i>
<i
class="el-icon-arrow-up el-icon--right"
v-if="searchBtnShow"
></i>
</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-col>
</el-form>
</el-row>
展开/收起按钮
<el-button type="text" size="mini" @click="showAllBtn">
{{ searchBtnText }}
<i class="el-icon-arrow-down el-icon--right"
v-if="!searchBtnShow">
</i>
<i class="el-icon-arrow-up el-icon--right"
v-if="searchBtnShow">
</i>
</el-button>
data里面
//查询条件显示
searchBtnText: "展开",
searchBtnShow: false,
showAllBtn() {
if (this.searchBtnShow) {
this.searchBtnText = "展开";
this.searchBtnShow = false;
} else {
this.searchBtnText = "收起";
this.searchBtnShow = true;
}
}