fix(过滤组件): 过滤组件,文本类型的列中存在空值时,过滤组件可筛选空值 #7720

This commit is contained in:
dataeaseShu 2024-03-14 11:49:32 +08:00
parent a86da074f6
commit 834a71f1cc
2 changed files with 24 additions and 23 deletions

View File

@ -32,17 +32,15 @@
>
{{ $t('commons.all') }}
</el-checkbox>
<el-checkbox-group
v-model="value"
@change="handleCheckedChange"
>
<template v-for="item in data">
<template v-for="item in dataWithEmpty">
<el-checkbox
:key="item.id"
:label="item.id"
>{{ item.id }}
>{{ item.label || item.id }}
</el-checkbox>
<br :key="item.id">
</template>
@ -58,12 +56,12 @@
@change="changeRadioBox"
>
<el-radio
v-for="(item, index) in data"
:key="index"
v-for="item in dataWithEmpty"
:key="item.id"
:label="item.id"
@click.native.prevent="testChange(item)"
>
<span>{{ item.id }}</span>
<span>{{item.label || item.id }}</span>
</el-radio>
</el-radio-group>
</div>
@ -131,6 +129,9 @@ export default {
}
},
computed: {
dataWithEmpty() {
return this.element.options.attrs.showEmpty ? [{ label: '空数据', id: '_empty_$'}, ...this.data] : this.data
},
operator() {
return this.element.options.attrs.multiple ? 'in' : 'eq'
},
@ -175,8 +176,8 @@ export default {
this.changeValue(value)
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
},
'element.options.attrs.fieldId': function(value, old) {
@ -199,8 +200,8 @@ export default {
this.clearDefault(this.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
}) || (this.element.options.value = '')
},
@ -217,8 +218,8 @@ export default {
this.$nextTick(() => {
this.show = true
if (value) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
this.changeInputStyle()
})
@ -242,8 +243,8 @@ export default {
this.data = this.optionData(res.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
}) || (this.element.options.value = '')
},
@ -318,8 +319,8 @@ export default {
this.changeValue(this.value)
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
}
},
@ -368,8 +369,8 @@ export default {
this.data = this.optionData(res.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.data.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.data.length
this.checkAll = this.value.length === this.dataWithEmpty.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.dataWithEmpty.length
}
})
}
@ -454,14 +455,14 @@ export default {
this.changeValue(value)
},
handleCheckAllChange(val) {
this.value = val ? this.data.map(item => item.id) : []
this.value = val ? this.dataWithEmpty.map(item => item.id) : []
this.isIndeterminate = false
this.changeValue(this.value)
},
handleCheckedChange(values) {
const checkedCount = values.length
this.checkAll = checkedCount === this.data.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.data.length
this.checkAll = checkedCount === this.dataWithEmpty.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataWithEmpty.length
this.changeValue(values)
},
testChange(item) {

View File

@ -69,7 +69,7 @@
<el-col :span="16">
<div class="filter-options-right">
<span style="padding-right: 10px;">
<span v-if="widget.name && ['textSelectWidget', 'textSelectGridWidget'].includes(widget.name)" style="padding-right: 10px;">
<el-checkbox
v-model="attrs.showEmpty"
>{{ $t('panel.show_empty') }}