搜索框展开、关闭

最新推荐文章于 2024-05-16 13:30:42 发布

暴富暴富暴富啦啦啦

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量447

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/szzlh123456789/article/details/135671826

版权

搜索框展开、关闭

 <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;
   }
}