elementUI搜索条件样式以及vue+element纯前端实现搜索功能【数据量少】

有蝉

已于 2022-03-17 17:31:45 修改

阅读量7.9k

点赞数

分类专栏： js 文章标签： element vue

于 2019-04-28 11:07:04 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/89633843

版权

js 专栏收录该内容

77 篇文章 3 订阅

订阅专栏

效果图：

HTML

  <!-- 搜索框 -->
    <div class="seach-container">
      <div class="flex flex-wrap justify-between">
        <!-- 项目 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span class="letterspance2">项&nbsp;&nbsp;&nbsp;目</span>
            </div>
            <div class="form-box-item">
              <el-cascader
                filterable
                :show-all-levels="false"
                :options="listChildOrgInfoList"
                v-model="projectId"
                :props="defaultProps1"
                @change="projectchange"
                size="small"
                placeholder="请选择项目"
                clearable
              ></el-cascader>
            </div>
          </div>
        </div>
        <!-- 计划开始时间 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span>计划开始时间</span>
            </div>
            <div class="form-box-item">
              <el-date-picker
                size="small"
                clearable
                v-model="searchParam.startTimeArr"
                :picker-options="pickerOptions1"
                type="daterange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <!-- 计划结束时间 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span>计划结束时间</span>
            </div>
            <div class="form-box-item">
              <el-date-picker
                size="small"
                clearable
                v-model="searchParam.endTimeArr"
                :picker-options="pickerOptions2"
                type="daterange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <!-- 计划状态 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span class="letterspance2">计划状态</span>
            </div>
            <div class="form-box-item">
              <el-select size="small" v-model="searchParam.state" placeholder="请选择计划状态">
                <el-option label="全部" value></el-option>
                <el-option label="进行中" value="0"></el-option>
                <el-option label="已完成" value="1"></el-option>
                <el-option label="逾期" value="2"></el-option>
                <el-option label="未开始" value="3"></el-option>
                <el-option label="准备中" value="4"></el-option>
                <el-option label="未按时开工" value="5"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 里程碑 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span class="letterspance2">里程碑</span>
            </div>
            <div class="form-box-item">
              <el-select size="small" v-model="searchParam.Isms" placeholder="请选择里程碑">
                <el-option label="全部" value></el-option>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 责任人 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span class="letterspance2">责任人</span>
            </div>
            <div class="form-box-item">
               <el-select v-model="searchParam.respUser" clearable placeholder="请选择负责人" size="small">
                  <el-option
                    v-for="item in respUserList"
                    :key="item.id"
                    :label="item.trueName"
                    :value="item.id">
                  </el-option>
                </el-select>
            </div>
          </div>
        </div>
        <!-- 项目计划名称 -->
        <div class="form-container">
          <div class="form-box">
            <div class="form-box-label">
              <span class="letterspance2">项目计划名称</span>
            </div>
            <div class="form-box-item">
              <el-input v-model="searchParam.planName" size="small" placeholder="请输入项目计划名称"></el-input>
            </div>
          </div>
        </div>
        <div class="form-container">
          <div class="form-box" style="width:400px">
            <el-button size="small" type="primary" @click="refreshList">搜索</el-button>
          </div>
        </div>
      </div>
    </div>

scss

$itemWdth:300px;
.form-container{
  width:$itemWdth;
  margin:15px;
}
.form-box{
  width: 100%;
  margin-bottom:10px;
}
.form-box-label{
  float: left;
  width: 99px;
  height:30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #908888;
  white-space: nowrap;
  border:1px solid #DCDFE6;
  border-right: 0;
  border-radius: 4px 0px 0px 4px;
  text-overflow:ellipsis;
  overflow:hidden;
  background: #f6f7f9;
}
.form-box-item{
  margin-left:100px;
  width:$itemWdth;
  .el-input__inner{
    border-radius: 0 4px 4px 0!important;
  }
  .el-select,.el-input,.el-cascader{
    display: block;
    width: $itemWdth;
  }
  .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: $itemWdth;
  }
}

vue+element纯前端实现搜索功能【数据量少】

<div class="m-box">
  <div class="m-title">
    <el-input class="config" clearable placeholder="输入关键字搜索" v-model="search" />
  </div>
  <div class="m-content">
    <el-table
      :data="teacherPag.filter(data => !search || (data.realname+data.mobile).includes(search))" border row-key="id">
      <el-table-column  label="用户">
        <template v-slot="scope">
          <el-col :span="12">{{ scope.row.realname }}</el-col>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" prop="mobile"></el-table-column>
    </el-table>
  </div>
</div>