Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c98b185d 1 parent 66dbb5bb

下拉框其他输入项测试

Inline Side-by-side
Showing 3 changed files with 19 additions and 7 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-01-30 12:40:36 4 + * @LastEditTime: 2023-01-30 14:23:30
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 style="margin-bottom: 0.25rem" 34 style="margin-bottom: 0.25rem"
35 >{{ x.title }}</van-checkbox 35 >{{ x.title }}</van-checkbox
36 > 36 >
37 - <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" /> 37 + <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
38 </van-checkbox-group> 38 </van-checkbox-group>
39 </template> 39 </template>
40 </van-field> 40 </van-field>
...@@ -61,7 +61,7 @@ const HideShow = computed(() => { ...@@ -61,7 +61,7 @@ const HideShow = computed(() => {
61 }) 61 })
62 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。 62 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
63 // 绑定值发生变化时回调，处理选项为其他时的输入项录入 63 // 绑定值发生变化时回调，处理选项为其他时的输入项录入
64 -const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断 64 +const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
65 const add_info = ref(''); 65 const add_info = ref('');
66 const add_info_name = ref(props.item.key + '#'); 66 const add_info_name = ref(props.item.key + '#');
67 const add_info_key = ref('其他'); // TODO: 以后动态获取 67 const add_info_key = ref('其他'); // TODO: 以后动态获取
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 13:46:51 2 * @Date: 2022-08-30 13:46:51
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-21 11:25:55 4 + * @LastEditTime: 2023-01-30 14:20:52
5 * @FilePath: /data-table/src/components/PickerField/index.vue 5 * @FilePath: /data-table/src/components/PickerField/index.vue
6 * @Description: 单列选择器组件 6 * @Description: 单列选择器组件
7 --> 7 -->
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
22 @click="showPicker = true" 22 @click="showPicker = true"
23 :border="false" 23 :border="false"
24 /> 24 />
25 + <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" />
25 <van-popup v-model:show="showPicker" position="bottom"> 26 <van-popup v-model:show="showPicker" position="bottom">
26 <van-picker 27 <van-picker
27 :columns="item.component_props.options" 28 :columns="item.component_props.options"
...@@ -37,7 +38,15 @@ const props = defineProps({ ...@@ -37,7 +38,15 @@ const props = defineProps({
37 item: Object, 38 item: Object,
38 }); 39 });
39 40
41 +// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
42 +// 绑定值发生变化时回调，处理选项为其他时的输入项录入
43 +const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
44 +const add_info = ref('');
45 +const add_info_name = ref(props.item.key + '#');
46 +const add_info_key = ref('其他'); // TODO: 以后动态获取
47 +
40 onMounted(() => { 48 onMounted(() => {
49 + add_info_name.value = `${props.item.key}#${add_info_key.value}`
41 // props.item.component_props.options = props.item.component_props.options.map((opt) => { 50 // props.item.component_props.options = props.item.component_props.options.map((opt) => {
42 // return { 51 // return {
43 // text: opt, 52 // text: opt,
...@@ -52,6 +61,9 @@ const showPicker = ref(false); ...@@ -52,6 +61,9 @@ const showPicker = ref(false);
52 const onConfirm = ({ selectedOptions }) => { 61 const onConfirm = ({ selectedOptions }) => {
53 props.item.value = selectedOptions[0]?.value; 62 props.item.value = selectedOptions[0]?.value;
54 showPicker.value = false; 63 showPicker.value = false;
64 + if (add_info_key.value === props.item.value) {
65 + has_add_info.value = true;
66 + }
55 }; 67 };
56 // 隐藏显示 68 // 隐藏显示
57 const HideShow = computed(() => { 69 const HideShow = computed(() => {
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-01-30 12:41:51 4 + * @LastEditTime: 2023-01-30 14:22:57
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 style="margin-bottom: 0.25rem" 29 style="margin-bottom: 0.25rem"
30 >{{ x.title }}</van-radio 30 >{{ x.title }}</van-radio
31 > 31 >
32 - <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" /> 32 + <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
33 </van-radio-group> 33 </van-radio-group>
34 </template> 34 </template>
35 </van-field> 35 </van-field>
...@@ -53,7 +53,7 @@ const HideShow = computed(() => { ...@@ -53,7 +53,7 @@ const HideShow = computed(() => {
53 }) 53 })
54 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。 54 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
55 // 绑定值发生变化时回调，处理选项为其他时的输入项录入 55 // 绑定值发生变化时回调，处理选项为其他时的输入项录入
56 -const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断 56 +const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
57 const add_info = ref(''); 57 const add_info = ref('');
58 const add_info_name = ref(props.item.key + '#'); 58 const add_info_name = ref(props.item.key + '#');
59 const add_info_key = ref('其他'); // TODO: 以后动态获取 59 const add_info_key = ref('其他'); // TODO: 以后动态获取
......