【记录25】动态表单的实现3.0

最新推荐文章于 2024-03-30 11:36:28 发布

~牧马~

最新推荐文章于 2024-03-30 11:36:28 发布

阅读量445

点赞数 1

分类专栏：案例 vue vant UI 文章标签： van-field 动态表单 van-stepper

本文链接：https://blog.csdn.net/weixin_45527702/article/details/124499815

版权

vue 同时被 3 个专栏收录

81 篇文章 3 订阅

订阅专栏

案例

46 篇文章 0 订阅

订阅专栏

vant UI

3 篇文章 0 订阅

订阅专栏

这篇文章采用的技术是vant UI组件，对它的介绍这里小编就不多说了，做前端的都知道vant UI官网

这里笔者描述下项目需求，通过进步器来控制表单的数量
进步器的两个事件的触发@plus="ChangeDvc_out_value_count_plus"控制进步器的继增，@minus="ChangeDvc_out_value_count_minus"控制其继减；this.tableData是一个动态表单的参数列表，通过控制其长度来改变表单的数量。

<van-field required name="dvc_out_value_count" label="动态表单数量" :disabled="edit_disabled">
                <template #input>
                    <van-stepper v-model="dvc_out_value_count" min="0" integer :disabled="edit_disabled"  @plus="ChangeDvc_out_value_count_plus" @minus="ChangeDvc_out_value_count_minus" />
                </template>
            </van-field>

ChangeDvc_out_value_count_plus(){
            console.log(this.on_name_List);
            this.tableData.push({ low_pass:'', high_pass:'', fourth_low:'', fourth_limit:'', })
            console.log(this.tableData.length);
        },
ChangeDvc_out_value_count_minus(){
            this.tableData.splice(-1,1)
        },

<van-field required name="dvc_out_value_count" label="动态表单数量" :disabled="edit_disabled">
                <template #input>
                    <van-stepper v-model="dvc_out_value_count" min="0" integer :disabled="edit_disabled"  @plus="ChangeDvc_out_value_count_plus" @minus="ChangeDvc_out_value_count_minus" />
                </template>
            </van-field>
            <!-- 动态表单 -->
            <div>
                <template v-for="(item, index) in tableData">
                    <table border cellspacing="5px" :key="index" style="text-align:center;width:100%;text-align:center;background-color:#F7F7F7;padding:5px;border-radius:5px;margin-top:10px;">
                        <tr>
                            <td style="width:25%;">名称</td>
                            <td style="width:25%;">级别</td>
                            <td style="width:25%;">上限</td>
                            <td style="width:25%;">下限</td>
                        </tr>
                        <tr>
                            <td>四级</td>
                            <td><input style="width:100%;text-align:center;" type="number" v-model="item.fourth_limit"   placeholder="上限"></td>
                            <td><input style="width:100%;text-align:center;" type="number" v-model="item.fourth_low" placeholder="下限"></td>
                        </tr>
                        <tr>
                            <td>最大值</td>
                            <td colspan="2"><input style="width:100%;text-align:center;" v-model="item.high_pass"  type="number" placeholder="最大值"></td>
                        </tr>
                        <tr>
                            <td>最小值</td>
                            <td colspan="2"><input style="width:100%;text-align:center;" v-model="item.low_pass" type="number" placeholder="最小值"></td>
                        </tr>
                    </table>
                </template>
            </div>