【uniapp 篇 】动态添加 表单，所添加元素展示在同一行

动态添加 表单，所添加元素展示在同一行

                            <uni-forms labelWidth="68px">

                                <uni-forms-item v-for="(item,index) in baseFormData.dynamicTable.timeField.array"
                                    :key="item.id" :label="item.label"
                                    :name="['timeFields',index,'value']">
                                    <view class="form-item">
                                        <uni-easyinput v-model="baseFormData.dynamicTable.timeField.array[index].field"
                                            placeholder="请输入时间字段" />
                                        <uni-data-picker v-model="baseFormData.dynamicTable.timeField.array[index].opt"
                                            :localdata="opts" popup-title="选取连接方式"
                                            :ellipsis="false" style="width: 80px; flex: none;"></uni-data-picker>
                                        <uni-data-picker v-model="baseFormData.dynamicTable.timeField.array[index].time"
                                            :localdata="paramTimeList" @change="paramTimeListChange($event, index)"
                                            popup-title="选取时间点" :ellipsis="false"></uni-data-picker>
                                        <uni-number-box :min="1" :max="1000"
                                            v-model="baseFormData.dynamicTable.timeField.array[index].second"
                                            style="float: left;" :color="numberBoxProps.paramTimes[index].color"
                                            :disabled="numberBoxProps.paramTimes[index].disabled" width="60" />
                                        <button class="button" size="mini" type="default"
                                            @click="delDynamicTableTimeFields(item.id)">删除</button>
                                    </view>
                                </uni-forms-item>
                            </uni-forms>
                            <view class="button-group">
                                <button type="primary" size="default" @click="addDynamicTableTimeField">新增时间</button>
                            </view>

 

<script>

    export default {

        data() {
            return {
                // 基础表单数据
                baseFormData: {
                    dynamicTable: {
                        timeField: {
                            array: []
                        }
                    },
                    paramTimes:[]
                },
                numberBoxProps: {
                    paramTimes: []
                },
                opts:{[
                    {text: '>',        value: 10},
                    {text: '<',        value: 20},
                    {text: '>=',    value: 30},
                    {text: '<=',    value: 40},
                    {text: '!=',    value: 50}
                ]},
                paramTimeList:{[
                    {text: '执行当下 now',     value: 10},
                    {text: '今日 凌晨',     value: 20},
                    {text: 'n日前 凌晨',     value: 30},
                    {text: '本周初 凌晨',     value: 40},
                    {text: 'n周初 凌晨',     value: 50},
                    {text: '本季度初 凌晨', value: 60},
                    {text: 'n季度初 凌晨',     value: 70},
                    {text: '本月初 凌晨',     value: 80},
                    {text: 'n月初 凌晨',     value: 90},
                    {text: '本年初 凌晨',     value: 100},
                    {text: 'n年初 凌晨',     value: 110}
                ]}
            }
        },
        methods: {
            addDynamicTableTimeField() {
                // 添加字段输入框
                this.baseFormData.dynamicTable.timeField.array.push({
                    label: '时间字段',
                    value: '',
                    opt: 0,
                    time: 0,
                    field: '',
                    second: 0,
                    rules: [{
                        'required': true,
                        errorMessage: '域名项必填'
                    }],
                    id: Date.now()
                });
                // 添加数字输入框
                this.numberBoxProps.paramTimes.push({
                    color: "#fff",
                    disabled: true
                })
            },
            // 取值的时间限制范围
            paramTimeListChange(e, index) {
                const selectVal = e.detail.value[0].value
                this.paramTimeStyleChange(selectVal, index)
            },
            paramTimeStyleChange(selectVal, index){
                console.log("selectVal:", selectVal)
                console.log("index:", index)
                // 动态增加的 "时间字段"
                if (selectVal == 30 || selectVal == 50 || selectVal == 70 || selectVal == 90 || selectVal == 110) {
                    // 选中了 “取指定数量” ，需要指定数量
                    this.numberBoxProps.paramTimes[index].color = "#000"
                    this.numberBoxProps.paramTimes[index].disabled = false
                    this.baseFormData.paramTimes[index].time = selectVal
                } else {
                    this.numberBoxProps.paramTimes[index].color = "#fff"
                    this.numberBoxProps.paramTimes[index].disabled = true
                }
            },
        }
    }

</script>