hookehuyr

fix 修复多选组件默认值还原和只读状态的显示问题

<!--
* @Date: 2022-08-30 11:34:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-06-06 15:41:04
* @LastEditTime: 2024-06-13 15:27:37
* @FilePath: /data-table/src/components/CheckboxField/index.vue
* @Description: 多项选择控件
-->
......@@ -21,12 +21,12 @@
:max="item.component_props.max" style="width: 100%">
<div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper">
<div v-if="item.component_props.readonly">
<div v-if="item.component_props.default.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
<div v-if="checkbox_value.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
<div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
</div>
<van-checkbox v-else @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
:checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
<van-field v-if="checkbox_value.includes(x.value) && x.is_input && (item.component_props.readonly && x.affix)" @blur="onBlur(x)" v-model="x.affix"
<van-field v-if="checkbox_value.includes(x.value) && x.is_input" @blur="onBlur(x)" v-model="x.affix"
label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
:required="x.input_required" :readonly="item.component_props.readonly" class="affix-input" />
</div>
......@@ -96,6 +96,38 @@ const handleEmit = (item) => {
emit("active", props.item.value);
}
onMounted(() => {
// TAG:默认值处理
let arr = props.item.component_props.default;
let hasColonSome = arr.some(item => item.includes(':')); // 检查是否有元素包含冒号
if (hasColonSome) { // 带补充信息输入框
// 提取冒号前的部分生成新的数组
let titles = arr.map(item => {
if (item.includes(':')) {
return item.split(': ')[0]
} else {
return item
}
});
// 生成对象
let obj = {};
arr.forEach(item => {
if (item.includes(':')) {
let parts = item.split(': ');
obj[parts[0]] = parseInt(parts[1]);
}
});
checkbox_value.value = titles;
//
props.item.component_props.options.forEach(item => {
for (const key in obj) {
if (item.value === key) {
item.affix = obj[key]
}
}
})
} else { // 纯多选情况
checkbox_value.value = arr;
}
// 发送自定义数据结构
props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
emit("active", props.item.value);
......