vue动态列表

Berky小伯恩

已于 2022-12-09 10:16:40 修改

阅读量2.3k

点赞数

文章标签： vue.js javascript

于 2022-06-22 16:42:59 首次发布

本文链接：https://blog.csdn.net/weixin_43930529/article/details/125411907

版权

本文介绍了如何在Vue.js中实现动态列表的操作，包括效果展示、实例代码和代码解释。主要内容涉及列表的添加、修改和删除功能，强调了在修改列表时使用Vue.set强制渲染数据的重要性，以及新增功能的简化策略。

摘要由CSDN通过智能技术生成

1.效果展示

在这里插入图片描述

2.实例代码

<body>标签：


<div id=wrapper>
<button @click="disDrawer = true" >弹出抽屉</button>
<el-drawer
            :title="标题"
            :visible.sync="disDrawer"
            size="50%">
        <div class="form-center">
            <div class="form-boder">
                <el-row>
                    <el-col :span="6">
                        <span class="form-boder-title">字段1:</span>
                        <span>xxx</span>
                    </el-col>
                    <el-col :span="6">
                        <span class="form-boder-title">字段2:</span>
                        <span>xxx</span>
                    </el-col>
                    <el-col :span="6">
                        <span class="form-boder-title">字段3:</span>
                        <span>xxx</span>
                    </el-col>
                    <el-button @click="add" type="primary" size="mini" style="float: right;">新增</el-button>
                </el-row>


                <el-dialog title="新增" :visible.sync="dialogFormVisible"  :append-to-body='true' :close-on-click-modal="false">
                    <el-form ref="addData" :model="dataForm" :rules="rules">
                        <el-form-item label="col1" prop="col1" >
                            <el-input type="text" placeholder="请输入col1" clearable v-model="dataForm.col1" style="width: 180px">
                        </el-form-item>
                        <el-form-item label="col2" prop="col2" >
                            <el-input type="text" placeholder="请输入col2" clearable v-model="dataForm.col2" style="width: 180px">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot=