<template>
|
<span class="filter-popover">
|
<el-popover
|
ref="popoverRef"
|
placement="bottom"
|
:width="popoverWidth"
|
trigger="click"
|
v-model="popoverVisible"
|
>
|
<!--多选-->
|
<div class="popover-content">
|
<el-checkbox
|
v-if="isFilterList.length"
|
v-model="checkAll"
|
:indeterminate="isIndeterminate"
|
@change="toSelectedAllList"
|
>全选</el-checkbox>
|
<el-checkbox-group
|
v-if="isFilterList.length"
|
v-model="selectedList"
|
@change="toSelectedList"
|
>
|
<el-checkbox
|
v-for="item in isFilterList"
|
:key="item.name"
|
:label="item.id"
|
>{{ item.name }}</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="btn">
|
<el-button size="mini" @click.stop="btnReset">重置</el-button>
|
<el-button size="mini" type="primary" @click.stop="toFiltering">确定</el-button>
|
</div>
|
<svg slot="reference" class="filter-icon icon" t="1711007988136" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4239" width="200" height="200"><path d="M855.342766 151.46262c-6.056949-11.851932-18.984377-19.393699-33.219589-19.393699L101.903901 132.068921c-14.360056 0-27.412326 7.704472-33.396621 19.744693-5.988388 12.015661-3.845585 26.157753 5.520737 36.192294l255.896134 274.308483 0 309.339324c0 12.847609 7.895831 24.602328 20.389376 30.328749l189.116195 86.432535c5.154393 2.371 10.771321 3.515057 16.33913 3.515057 6.541997 0 13.090133-1.607614 18.926048-4.797259 10.718109-5.945409 17.427928-16.503882 17.809621-28.037567l12.957103-396.767536 245.078765-274.90507C859.543438 177.316451 861.425298 163.313529 855.342766 151.46262zM520.773827 804.275693l-117.384477-53.647851L403.38935 483.628836l127.858016 0L520.773827 804.275693zM550.774095 416.986019c-1.963725-0.299829-3.761674-1.090844-5.809309-1.090844L383.519814 415.895175 181.938726 199.803605l562.427506 0L550.774095 416.986019zM685.454494 524.008498l273.392624 0 0 59.759035-273.392624 0 0-59.759035ZM685.454494 654.104485l273.392624 0 0 59.759035-273.392624 0 0-59.759035ZM685.454494 773.618463l273.392624 0 0 59.759035-273.392624 0 0-59.759035Z" fill="#272636" p-id="4240"></path></svg>
|
</el-popover>
|
</span>
|
</template>
|
|
<script>
|
export default {
|
name: "PagerView",
|
props: {
|
isFilterList: {
|
type: Array,
|
default: () => [],
|
},
|
layout:{
|
type:[Number,String],
|
default:''
|
},
|
popoverWidth:{
|
type:[Number,String],
|
default:100
|
},
|
//默认值
|
selectedListDefault: {
|
type: [Array, String, Number],
|
default: null
|
},
|
},
|
data() {
|
return {
|
// 多选框中全选框选中与否的标识
|
checkAll: false,
|
// 表示 checkbox 的不确定状态，一般用于实现全选的效果
|
isIndeterminate: false,
|
// 筛选弹窗多选列表选中数据
|
selectedList: [],
|
popoverVisible:false,
|
};
|
},
|
mounted() {
|
this.selectedList = this.selectedListDefault
|
this.toSelectedList()
|
},
|
watch:{
|
selectedListDefault(){
|
this.selectedList = this.selectedListDefault
|
this.toSelectedList()
|
}
|
},
|
methods: {
|
// 多选框全选操作
|
toSelectedAllList(val) {
|
this.selectedList = val ? this.isFilterList.map(s => s.id) : []
|
if(val){
|
this.checkAll = true
|
}else{
|
this.checkAll = false
|
}
|
this.isIndeterminate = false
|
},
|
// 多选框选择操作
|
toSelectedList() {
|
if (this.selectedList.length == 0) {
|
this.checkAll = false
|
this.isIndeterminate = false
|
} else if(this.selectedList.length == this.isFilterList.length){
|
this.checkAll = true
|
this.isIndeterminate = false
|
} else {
|
this.isIndeterminate = true
|
this.checkAll = false
|
}
|
},
|
//重置
|
btnReset() {
|
// 移除多选框的全选状态
|
this.checkAll = false
|
this.isIndeterminate = false
|
this.selectedList =[]
|
this.popoverVisible=false;
|
this.$emit('toFiltering', {
|
filterVal: this.selectedList||[],
|
layout: this.layout || ''
|
})
|
},
|
// 确定筛选
|
toFiltering() {
|
this.popoverVisible=false;
|
this.$emit('toFiltering', {
|
filterVal: this.selectedList||[],
|
layout: this.layout || ''
|
})
|
}
|
},
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.filter-popover{
|
width:17px;
|
height:17px;
|
margin:0;
|
margin-top:3px;
|
float:right;
|
display:inline-block;
|
.filter-icon{
|
width:17px;
|
height:17px;
|
display:inline-block;
|
}
|
}
|
.popover-content{
|
max-height:130px;
|
margin-bottom:5px;
|
overflow-y:auto;
|
}
|
</style>
|
