展示效果图在结尾
html部分
<template>
<div class="resourceCatalogue">
<div class="container-fixed">
<!--筛选条件-->
<div class="condition">
<Row slot="title"
class="search">
<Col :span="12">
<h4>筛选条件</h4>
</Col>
<!-- 区域切换 -->
<Col :span="2">
</Col>
<Col :span="10"
style="float: right;">
<span class="content">
<Input search
enter-button="搜索"
@on-search="searchResourceInfo"
v-model="searchData"
placeholder="请输入搜索信息" />
<Button type="primary"
@click="highSearch">
高级搜索
<Icon :type="isShowArea?'ios-arrow-down':'ios-arrow-up'"
size="20" />
</Button>
</span>
</Col>
</Row>
<!-- 高级搜索区域显示/隐藏 -->
<div v-if="isShowArea">
<!-- <Row class="condition-department">
<Col span="3">
<h4>区域切换</h4>
</Col>
<Col span="19">
<areaChange style="display:inline-block;line-height:36px"></areaChange>
<Tag type="dot"
color="error"
v-for="item in regionList"
:key="item.id"
:name="item.id"
closable
@on-close="closeRegionTag">{{item.areaName}}</Tag>
</Col>
</Row> -->
<Divider style="margin: 10px 0;"
dashed />
<section v-for="(item, index) in classifyData"
:key="index">
<Row class="condition-department">
<Col span="3">
<h4>{{item.catalogName}}</h4>
</Col>
<Col span="10">
<!-- 单选查询 -->
<!-- <RadioGroup v-model="classifyForm[`classify${item.catalogCode}`]">
<div :class="['condition-inner',{'condition-inner-show-more':item.isShowMore}]">
<Radio
v-for="innerItem in item.parentCategoryVolist"
:key="innerItem.id"
:label="innerItem.catalogCode"
style="padding:10px;"
>{{innerItem.catalogName}}</Radio>
</div>
</RadioGroup>-->
<!-- 多选查询 -->
<CheckboxGroup v-model="tagList" @on-change="checkData">
<div :class="['condition-inner',{'condition-inner-show-more':item.isShowMore}]">
<Checkbox v-for="innerItem in item.parentCategoryVolist"
:key="innerItem.id"
:label="innerItem.catalogName"
style="padding:10px;">{{innerItem.catalogName}}</Checkbox>
</div>
</CheckboxGroup>
</Col>
<Col span="2">
<div v-if="item.parentCategoryVolist.length>10"
@click="item.isShowMore = !item.isShowMore"
class="show-more">
{{ item.isShowMore ?'更多':'收起'}}
<Icon :type="item.isShowMore ?'ios-arrow-down':'ios-arrow-up'"
size="20" />
</div>
</Col>
</Row>
<Divider style="margin: 10px 0;"
dashed />
</section>
<Row class="condition-department">
<Col span="3">
<h4>搜索条件</h4>
</Col>
<Col span="19">
<Tag type="dot"
color="primary"
v-for="(item,index) in tagList"
:key="index"
:name="item"
closable
@on-close="closeTag">{{item}}</Tag>
</Col>
</Row>
<p class="bottomBtn">
<Button size="large"
type="primary"
@click="reset">重置</Button>
<Button size="large"
type="primary"
@click="demand">查询</Button>
</p>
</div>
</div>
</div>
</div>
</template>
js部分
export default {
name: '',
components: {},
data() {
return {
isShowArea: false,
classifyForm: {}, // 分类查询
classifyData: [
{
catalogName: '是',
catalogCode: 'shishi',
isShowMore: true,
parentCategoryVolist: [
{
catalogName: 'bbb',
id: '1',
catalogCode: 'bbb'
},
{
catalogName: 'ccc',
id: '2',
catalogCode: 'ccc'
},
{
catalogName: 'ddd',
id: '3',
catalogCode: 'ddd'
},
{
catalogName: 'eee',
id: '4',
catalogCode: 'eee'
},
{
catalogName: 'fff',
id: '5',
catalogCode: 'fff'
}
]
},
{
catalogName: '我',
catalogCode: 'wowo',
isShowMore: true,
parentCategoryVolist: [
{
catalogName: '对的',
id: '70',
catalogCode: 'duide'
},
{
catalogName: '规范',
id: '69',
catalogCode: 'guifan'
},
{
catalogName: '让他',
id: '68',
catalogCode: 'rangta'
},
{
catalogName: '好过',
id: '67',
catalogCode: 'haoguo'
},
{
catalogName: '会更好',
id: '66',
catalogCode: 'huigenghao'
}
]
},
{
catalogName: 'a',
catalogCode: 'a',
isShowMore: true,
parentCategoryVolist: [
{
catalogName: 'b',
id: '12'
},
{
catalogName: 'c',
id: '22'
},
{
catalogName: 'd',
id: '33'
},
{
catalogName: 'e',
id: '44'
},
{
catalogName: 'f',
id: '55'
}
]
},
{
catalogName: 'oo',
catalogCode: 'oo',
isShowMore: true,
parentCategoryVolist: [
{
catalogName: 'pp',
id: '99'
},
{
catalogName: 'ii',
id: '98'
},
{
catalogName: 'uu',
id: '97'
},
{
catalogName: 'yy',
id: '96'
},
{
catalogName: 'tt',
id: '95'
},
{
catalogName: 'bg',
id: '94'
},
{
catalogName: 'df',
id: '93'
},
{
catalogName: 'vf',
id: '92'
},
{
catalogName: 'xc',
id: '91'
},
{
catalogName: 'sd',
id: '90'
},
{
catalogName: 're',
id: '89'
},
{
catalogName: 'hg',
id: '88'
},
{
catalogName: 'pp',
id: '87'
},
{
catalogName: 'ii',
id: '86'
},
{
catalogName: 'uu',
id: '85'
},
{
catalogName: 'yy',
id: '84'
},
{
catalogName: 'tt',
id: '83'
},
{
catalogName: 'bg',
id: '871'
},
{
catalogName: 'df',
id: '672'
},
{
catalogName: 'vf',
id: '763'
},
{
catalogName: 'xc',
id: '764'
},
{
catalogName: 'sd',
id: '556'
},
{
catalogName: 're',
id: '476'
}
]
}
],
classifySearch: {},
classifyFormItem: '',
tagList: [],
searchData: ''
}
},
watch: {},
computed: {
},
mounted() {
},
methods: {
checkData (obj) {
console.log(obj)
},
// 搜索
searchResourceInfo(val) {
},
// 高级搜索
highSearch() {
this.isShowArea = !this.isShowArea
},
// 删除搜索项
closeTag(event, name) {
console.log(name)
this.tagList.forEach((item, index) => {
if (item === name) {
this.tagList.splice(index, 1)
}
})
},
// 重置
reset() {
// this.filterData.catalogName = ''
// this.classifyForm = {}
// if (this.regionDepartData.length) {
// let list = this.regionDepartData.map(item => item.catalogCode)
// this.getSelectData({
// ...this.filterData,
// departCategoryCode: list.join()
// })
// } else {
// this.publicFun()
// }
},
// 查询 重置公共方法
publicFun() {
// let _list = this.classifyData.map(
// (item) => item.catalogCode === '00001' && item.parentCategoryVolist
// )
// if (_list && _list.length && !this.regionCode) {
// this.filterData.pageNumber = 1
// this.recordPageNumber = 1
// this.getSelectData({ ...this.filterData, pageNumber: 1 })
// } else {
// this.searchData = []
// }
},
// 查询
demand() {
// console.log(this.filterData, '查询的数据')
// if (this.regionDepartData.length) {
// let list = this.regionDepartData.map(item => item.catalogCode)
// // this.filterData.pageNumber = 1
// this.getSelectData({
// ...this.filterData,
// departCategoryCode: list.join()
// })
// } else {
// this.publicFun()
// }
}
}
}
css部分
<style lang='less' scoped>
.resourceCatalogue {
//条件
.condition {
margin: 30px 0 20px 0;
.ivu-card-head p,
.ivu-card-head-inner {
height: 34px;
}
.search {
line-height: 34px;
.areaChange {
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 10px;
}
.content {
// margin-top: -24px;
display: flex;
> button {
// margin-top: 1px;
margin-left: 5px;
}
}
}
.bottomBtn {
text-align: center;
button {
margin: 30px 30px 10px 30px;
}
}
.show-more {
cursor: pointer;
padding: 10px;
}
&-inner {
height: auto;
/*overflow-y: scroll;*/
}
&-inner-show-more {
height: 48px;
overflow: hidden;
}
&-subject-inner {
height: auto;
/*overflow-y: scroll;*/
}
&-subject-show-more {
height: 48px;
overflow: hidden;
}
.condition-department {
h4 {
padding: 10px 0;
}
}
.condition-subject {
/*border-top: 1px solid #dbdbdb;*/
margin-top: 10px;
h4 {
padding: 10px 0;
}
}
}
//结果
.result {
margin-bottom: 30px;
.pull-right {
span {
padding: 20px 10px;
margin: 0 15px;
&.pointer {
cursor: pointer;
}
}
}
.sort-active {
color: #2e94ff;
}
}
//筛选结果
.selectList {
.resultList {
position: relative;
height: 295px;
margin: 10px 0;
border: 1px solid #dbdbdb;
&-monomer {
padding: 15px;
display: flex;
&-icon {
margin-right: 15px;
}
}
&-lookInfo {
width: 100%;
position: absolute;
bottom: 0;
padding: 12px 0;
text-align: center;
color: #6a6a6a;
border-top: 1px solid #dbdbdb;
background-color: #f7f9fa;
cursor: pointer;
}
}
.resultList-monomer-content {
width: 100%;
h3 {
cursor: pointer;
&:hover {
color: #009dff;
}
}
li {
list-style: none;
margin-top: 5px;
}
p {
margin: 4px 0;
}
span {
font-size: 14px;
font-weight: 600;
}
.type {
padding: 16px 0 0 0;
button {
margin: 0 8px;
.dbApplyStatus span {
font-size: 12px;
color: #2db7f5;
font-weight: normal;
}
.fileApplyStatus span {
font-size: 12px;
color: #19be6b;
font-weight: normal;
}
.apiApplyStatus span {
font-size: 12px;
color: #ff9900;
font-weight: normal;
}
}
span {
color: #c0c0c0;
}
}
}
}
.resultList-page {
text-align: center;
padding: 20px 0;
}
}
</style>
效果图展示如下：
2570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
