fix(过滤组件): 数值下拉组件设置样式为平铺展示tab组件切换标题无法显示

This commit is contained in:
dataeaseShu 2024-04-01 10:35:04 +08:00
parent d8dd664cb7
commit a2620d16de
2 changed files with 15 additions and 11 deletions

View File

@ -1,5 +1,9 @@
<template>
<el-radio-group @change="visualChange" v-model="selectValue">
<el-radio-group
style="height: 40px; line-height: 40px"
@change="visualChange"
v-model="selectValue"
>
<template v-for="item in options">
<el-radio
:key="item.id + 'radio'"
@ -7,7 +11,7 @@
:value="item.id"
v-if="radioStyle.showStyle === 'single'"
:disabled="itemDisabled"
/>
/>
<el-radio-button
v-else
:disabled="itemDisabled"
@ -91,7 +95,7 @@ export default {
},
radioStyle: {
handler() {
this.setPlaceholderColor()
this.setPlaceholderColor();
},
deep: true,
},
@ -104,20 +108,20 @@ export default {
});
},
beforeDestroy() {
let styleEle = document.querySelector(`#radio-style${this.id}`)
let styleEle = document.querySelector(`#radio-style${this.id}`);
if (styleEle) {
styleEle. parentElement.removeChild(styleEle)
styleEle.parentElement.removeChild(styleEle);
}
},
methods: {
setPlaceholderColor() {
let styleEle = document.querySelector(`#radio-style${this.id}`)
let styleEle = document.querySelector(`#radio-style${this.id}`);
if (!styleEle) {
styleEle = document.createElement('style')
styleEle.id = `radio-style${this.id}`
document.querySelector('head').appendChild(styleEle)
styleEle = document.createElement("style");
styleEle.id = `radio-style${this.id}`;
document.querySelector("head").appendChild(styleEle);
}
styleEle.innerHTML = `#component${this.id} {\n color: transparent !important; \n border-color:transparent !important; \n background-color: transparent !important; \n } #component${this.id} .el-radio-button:not(.is-active) .el-radio-button__inner {\n color: ${this.radioStyle.wordColor}; \n border-color: ${this.radioStyle.brColor}; \n background-color: ${this.radioStyle.innerBgColor}; \n } #component${this.id} .el-radio:not(.is-check) .el-radio__label {\n color: ${this.radioStyle.wordColor}; \n }`
styleEle.innerHTML = `#component${this.id} {\n background-color: transparent !important; \n } #component${this.id} .el-radio-button:not(.is-active) .el-radio-button__inner {\n color: ${this.radioStyle.wordColor}; \n border-color: ${this.radioStyle.brColor}; \n background-color: ${this.radioStyle.innerBgColor}; \n } #component${this.id} .el-radio:not(.is-check) .el-radio__label {\n color: ${this.radioStyle.wordColor}; \n }`;
},
resetList(arrays) {
if (Array.isArray(arrays)) {

View File

@ -108,7 +108,7 @@ export default {
computed: {
mode() {
let result = 'el-select'
if (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple && !this.isConfig) {
if (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple && !this.isConfig && this.element.options.attrs.required) {
return 'DeRadio'
}
if (this.element.options && this.element.options.attrs && this.element.options.attrs.visual) {