elementUI搜索条件样式以及vue+element纯前端实现搜索功能【数据量少】
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图:
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">项 目</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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献22条内容
所有评论(0)