<!--
|
* @Descripttion: 分类筛选器
|
* @version: 1.0
|
* @Author: sakuya
|
* @Date: 2022年5月26日15:59:52
|
* @LastEditors:
|
* @LastEditTime:
|
-->
|
|
<template>
|
<div class="sc-select-filter">
|
<div v-if="data.length<=0" class="sc-select-filter__no-data">
|
暂无数据
|
</div>
|
<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
|
<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label></div>
|
<div class="sc-select-filter__item-options">
|
<ul>
|
<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}" v-for="option in item.options" :key="option.value" @click="select(option, item)">
|
<el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
|
<span>{{option.label}}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
data: { type: Array, default: () => [] },
|
selectedValues: { type: Object, default: () => { return {} } },
|
labelWidth: {type: Number, default: 80},
|
outputValueTypeToArray: { type: Boolean, default: false }
|
},
|
data() {
|
return {
|
selected: {}
|
}
|
},
|
watch:{
|
data(val) {
|
val.forEach(item => {
|
this.selected[item.key] = this.selectedValues[item.key] ||
|
(Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
|
})
|
}
|
},
|
computed: {
|
selectedString() {
|
var outputData = JSON.parse(JSON.stringify(this.selected))
|
for (var key in outputData) {
|
outputData[key] = outputData[key].join(",")
|
}
|
return outputData
|
}
|
},
|
mounted() {
|
//默认赋值
|
this.data.forEach(item => {
|
this.selected[item.key] = this.selectedValues[item.key] ||
|
(Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
|
})
|
},
|
methods: {
|
select(option, item){
|
//判断单选多选
|
if(item.multiple){
|
//如果多选选择的第一个
|
if(option.value === item.options[0].value){
|
//就赋值第一个的值
|
this.selected[item.key] = [option.value]
|
}else{
|
//如果选择的值已有
|
if(this.selected[item.key].includes(option.value)){
|
//删除选择的值
|
this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === option.value), 1)
|
//当全删光时，把第一个选中
|
if(this.selected[item.key].length == 0){
|
this.selected[item.key] = [item.options[0].value]
|
}
|
}else{
|
//未有值的时候，追加选中值
|
this.selected[item.key].push(option.value)
|
//当含有第一个的值的时候，把第一个删除
|
if(this.selected[item.key].includes(item.options[0].value)){
|
this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === item.options[0].value), 1)
|
}
|
}
|
}
|
}else{
|
//单选时，如果点击了已有值就赋值
|
if(!this.selected[item.key].includes(option.value)){
|
this.selected[item.key] = [option.value]
|
}else{
|
return false
|
}
|
}
|
this.change()
|
},
|
change(){
|
if(this.outputValueTypeToArray){
|
this.$emit('onChange', this.selected)
|
}else{
|
this.$emit('onChange', this.selectedString)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.sc-select-filter {width: 100%;}
|
.sc-select-filter__item {display: flex;}
|
.sc-select-filter__item-title {width: 80px;}
|
.sc-select-filter__item-title label {font-size: 14px;padding-top:13px;display: inline-block;color: #999;}
|
.sc-select-filter__item-options {flex: 1;border-bottom: 1px dashed var(--el-border-color-light);}
|
.sc-select-filter__item-options ul {display: flex;flex-wrap: wrap;padding-top: 10px;}
|
.sc-select-filter__item-options li {list-style: none;cursor: pointer;height:28px;padding:0 15px;border-radius:32px;margin: 0 10px 10px 0;display: flex;align-items: center;background: var(--el-color-primary-light-9);}
|
.sc-select-filter__item-options li .el-icon {margin-right: 3px;font-size: 16px;}
|
.sc-select-filter__item-options li:hover {color: var(--el-color-primary);}
|
.sc-select-filter__item-options li.active {background: var(--el-color-primary);color: #fff;font-weight: bold;}
|
.sc-select-filter__item:last-of-type .sc-select-filter__item-options {border: 0;}
|
|
.sc-select-filter__no-data {color: #999;}
|
</style>
|
