Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2024-06-13 15:30:18 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7a727f8b77be7b2719bdcd316e6362268b609c8d
7a727f8b
1 parent
17908767
fix 修复多选组件默认值还原和只读状态的显示问题
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
35 additions
and
3 deletions
src/components/CheckboxField/index.vue
src/components/CheckboxField/index.vue
View file @
7a727f8
<!--
* @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);
...
...
Please
register
or
login
to post a comment