Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f876b57e 1 parent 4622c11d

✨ feat(单选按钮，多选按钮): 结构调整

Inline Side-by-side
Showing 2 changed files with 40 additions and 14 deletions
...@@ -9,15 +9,27 @@ ...@@ -9,15 +9,27 @@
9 <div class="checkbox-field-page"> 9 <div class="checkbox-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.label }} 11 {{ item.label }}
12 - <span v-if="item.component_props.required" style="color: red;">&nbsp;*</span> 12 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
13 - <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span> 13 + <span v-if="item.component_props.max" style="color: gray"
14 + >(最多可选数:&nbsp;{{ item.component_props.max }})</span
15 + >
14 </div> 16 </div>
15 - <van-field :name=" item.key" :rules="item.rules" :border="false"> 17 + <van-field :name="item.key" :rules="item.rules" :border="false">
16 <template #input> 18 <template #input>
17 - <van-checkbox-group v-model="item.value" :direction="item.component_props.direction" 19 + <van-checkbox-group
18 - :max="item.component_props.max"> 20 + v-model="item.value"
19 - <van-checkbox v-for="x in item.component_props.options" :key="index" :name="x.key" icon-size="1rem" shape="square" 21 + :direction="item.component_props.direction"
20 - style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox> 22 + :max="item.component_props.max"
23 + >
24 + <van-checkbox
25 + v-for="x in item.component_props.options"
26 + :key="index"
27 + :name="x"
28 + icon-size="1rem"
29 + shape="square"
30 + style="margin-bottom: 0.25rem"
31 + >{{ x }}</van-checkbox
32 + >
21 </van-checkbox-group> 33 </van-checkbox-group>
22 </template> 34 </template>
23 </van-field> 35 </van-field>
...@@ -26,8 +38,13 @@ ...@@ -26,8 +38,13 @@
26 38
27 <script setup> 39 <script setup>
28 const props = defineProps({ 40 const props = defineProps({
29 - item: Object 41 + item: Object,
30 -}) 42 +});
43 +
44 +onMounted(() => {
45 + // 默认值为数组
46 + props.item.value = [];
47 +});
31 </script> 48 </script>
32 49
33 <style lang="less" scoped> 50 <style lang="less" scoped>
......
...@@ -7,12 +7,21 @@ ...@@ -7,12 +7,21 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="radio-field-page"> 9 <div class="radio-field-page">
10 - <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div> 10 + <div class="label">
11 + {{ item.component_props.label
12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
11 <van-field :name="item.key" :rules="item.rules"> 14 <van-field :name="item.key" :rules="item.rules">
12 <template #input> 15 <template #input>
13 <van-radio-group v-model="item.value" :direction="item.component_props.direction"> 16 <van-radio-group v-model="item.value" :direction="item.component_props.direction">
14 - <van-radio v-for="x in item.component_props.options" :key="index" :name="x.key" icon-size="1rem" 17 + <van-radio
15 - style="margin-bottom: 0.25rem;">{{ x.value }}</van-radio> 18 + v-for="x in item.component_props.options"
19 + :key="index"
20 + :name="x"
21 + icon-size="1rem"
22 + style="margin-bottom: 0.25rem"
23 + >{{ x }}</van-radio
24 + >
16 </van-radio-group> 25 </van-radio-group>
17 </template> 26 </template>
18 </van-field> 27 </van-field>
...@@ -21,8 +30,8 @@ ...@@ -21,8 +30,8 @@
21 30
22 <script setup> 31 <script setup>
23 const props = defineProps({ 32 const props = defineProps({
24 - item: Object 33 + item: Object,
25 -}) 34 +});
26 </script> 35 </script>
27 36
28 <style lang="less" scoped> 37 <style lang="less" scoped>
......