【uniapp 篇 】動態添加 表單，所添加元素展示在同一行

動態添加 表單，所添加元素展示在同一行

 1                             <uni-forms labelWidth="68px">
 2 
 3                                 <uni-forms-item v-for="(item,index) in baseFormData.dynamicTable.timeField.array"
 4                                     :key="item.id" :label="item.label"
 5                                     :name="['timeFields',index,'value']">
 6                                     <view class="form-item">
 7                                         <uni-easyinput v-model="baseFormData.dynamicTable.timeField.array[index].field"
 8                                             placeholder="請輸入時間字段" />
 9                                         <uni-data-picker v-model="baseFormData.dynamicTable.timeField.array[index].opt"
10                                             :localdata="opts" popup-title="選取連接方式"
11                                             :ellipsis="false" style="width: 80px; flex: none;"></uni-data-picker>
12                                         <uni-data-picker v-model="baseFormData.dynamicTable.timeField.array[index].time"
13                                             :localdata="paramTimeList" @change="paramTimeListChange($event, index)"
14                                             popup-title="選取時間點" :ellipsis="false"></uni-data-picker>
15                                         <uni-number-box :min="1" :max="1000"
16                                             v-model="baseFormData.dynamicTable.timeField.array[index].second"
17                                             style="float: left;" :color="numberBoxProps.paramTimes[index].color"
18                                             :disabled="numberBoxProps.paramTimes[index].disabled" width="60" />
19                                         <button class="button" size="mini" type="default"
20                                             @click="delDynamicTableTimeFields(item.id)">刪除</button>
21                                     </view>
22                                 </uni-forms-item>
23                             </uni-forms>
24                             <view class="button-group">
25                                 <button type="primary" size="default" @click="addDynamicTableTimeField">新增時間</button>
27                             </view>

 

 1 <script>
 2 
 3     export default {
 4 
 5         data() {
 6             return {
 7                 // 基礎表單數據
 8                 baseFormData: {
 9                     dynamicTable: {
10                         timeField: {
11                             array: []
12                         }
13                     },
14                     paramTimes:[]
15                 },
16                 numberBoxProps: {
17                     paramTimes: []
18                 },
19                 opts:{[
20                     {text: '>',        value: 10},
21                     {text: '<',        value: 20},
22                     {text: '>=',    value: 30},
23                     {text: '<=',    value: 40},
24                     {text: '!=',    value: 50}
25                 ]},
26                 paramTimeList:{[
27                     {text: '執行當下 now',     value: 10},
28                     {text: '今日 凌晨',     value: 20},
29                     {text: 'n日前 凌晨',     value: 30},
30                     {text: '本週初 凌晨',     value: 40},
31                     {text: 'n周初 凌晨',     value: 50},
32                     {text: '本季度初 凌晨', value: 60},
33                     {text: 'n季度初 凌晨',     value: 70},
34                     {text: '本月初 凌晨',     value: 80},
35                     {text: 'n月初 凌晨',     value: 90},
36                     {text: '本年初 凌晨',     value: 100},
37                     {text: 'n年初 凌晨',     value: 110}
38                 ]}
39             }
40         },
41         methods: {
42             addDynamicTableTimeField() {
43                 // 添加字段輸入框
44                 this.baseFormData.dynamicTable.timeField.array.push({
45                     label: '時間字段',
46                     value: '',
47                     opt: 0,
48                     time: 0,
49                     field: '',
50                     second: 0,
51                     rules: [{
52                         'required': true,
53                         errorMessage: '域名項必填'
54                     }],
55                     id: Date.now()
56                 });
57                 // 添加數字輸入框
58                 this.numberBoxProps.paramTimes.push({
59                     color: "#fff",
60                     disabled: true
61                 })
62             },
63             // 取值的時間限制範圍
64             paramTimeListChange(e, index) {
65                 const selectVal = e.detail.value[0].value
66                 this.paramTimeStyleChange(selectVal, index)
67             },
68             paramTimeStyleChange(selectVal, index){
69                 console.log("selectVal:", selectVal)
70                 console.log("index:", index)
71                 // 動態增加的 "時間字段"
72                 if (selectVal == 30 || selectVal == 50 || selectVal == 70 || selectVal == 90 || selectVal == 110) {
73                     // 選中了 “取指定數量” ，需要指定數量
74                     this.numberBoxProps.paramTimes[index].color = "#000"
75                     this.numberBoxProps.paramTimes[index].disabled = false
76                     this.baseFormData.paramTimes[index].time = selectVal
77                 } else {
78                     this.numberBoxProps.paramTimes[index].color = "#fff"
79                     this.numberBoxProps.paramTimes[index].disabled = true
80                 }
81             },
82         }
83     }
84 
85 </script>