fix: 修复选项卡提交后设置为禁用 (#1748)

This commit is contained in:
shaohuzhang1 2024-12-03 18:52:26 +08:00 committed by GitHub
parent 289e12ccdf
commit 7b1449f1d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 4 deletions

View File

@ -5,8 +5,8 @@
:key="item.value"
class="item"
shadow="never"
:class="[modelValue == item[valueField] ? 'active' : '']"
@click="selected(item[valueField])"
:class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
@click="inputDisabled ? () => {} : selected(item[valueField])"
>
{{ item[textField] }}
</el-card>
@ -15,6 +15,9 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { FormField } from '@/components/dynamics-form/type'
import { useFormDisabled } from 'element-plus'
const inputDisabled = useFormDisabled()
const props = defineProps<{
formValue?: any
formfieldList?: Array<FormField>
@ -24,6 +27,7 @@ const props = defineProps<{
view?: boolean
//
modelValue?: any
disabled?: boolean
}>()
const selected = (activeValue: string | number) => {
@ -66,6 +70,16 @@ const option_list = computed(() => {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
.is-disabled {
border: 1px solid var(--el-card-border-color);
background-color: var(--el-fill-color-light);
color: var(--el-text-color-placeholder);
cursor: not-allowed;
&:hover {
cursor: not-allowed;
}
}
.active {
border: 1px solid var(--el-color-primary);
color: var(--el-color-primary);

View File

@ -4,7 +4,7 @@
v-for="item in option_list"
:key="item.value"
class="item"
:class="[modelValue == item[valueField] ? 'active' : '']"
:class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
@click="selected(item[valueField])"
>
{{ item[textField] }}
@ -14,6 +14,8 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { FormField } from '@/components/dynamics-form/type'
import { useFormDisabled } from 'element-plus'
const inputDisabled = useFormDisabled()
const props = defineProps<{
formValue?: any
formfieldList?: Array<FormField>
@ -54,7 +56,15 @@ const option_list = computed(() => {
padding: 3px 4px;
box-sizing: border-box;
white-space: nowrap;
.is-disabled {
border: 1px solid var(--el-card-border-color);
background-color: var(--el-fill-color-light);
color: var(--el-text-color-placeholder);
cursor: not-allowed;
&:hover {
cursor: not-allowed;
}
}
.active {
border-radius: 4px;
background: var(--el-color-primary-light-9);