vue增删改查表单

EstherNi

已于 2023-04-18 16:58:19 修改

阅读量625

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2022-06-20 14:35:08 首次发布

本文链接：https://blog.youkuaiyun.com/EstherNi/article/details/125372121

版权

VUE 专栏收录该内容

22 篇文章

订阅专栏

这段代码展示了如何使用 Vue.js 创建一个表单，动态新增和删除条目。用户可以点击‘新增’按钮打开对话框，然后添加任务执行人的姓名、手机号和载体信息。每个新增的条目都可以独立删除，且至少需要保留一条数据。确认后，表单数据将被打印到控制台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<el-form style="padding: 0 0 10px 0">
  <el-button type="primary" size="mini" @click="add">新增</el-button>
</el-form>

<el-dialog title="新增" :visible.sync="dialogFormVisible">
   <div class="addInfor">
	   <el-button type="primary" plain size="mini" @click="addInformation">
	   	<i class="el-icon-plus"></i>添加信息
	   </el-button>
   </div>
   <el-form v-for="(item, index) in addList" :key="index">
      <el-form-item label="任务执行人" label-width="90px">
        <el-input v-model="item.personName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务执行人手机号" label-width="144px">
      	<el-input v-model="item.personPhone" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="载体" label-width="60px">
          <el-input v-model="item.deviceCarrier" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button
            type="danger"
            size="small"
            @click="deleteInformation(index)"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>

 data() {
    return {
      addList: [
        {
          personName: "",
          personPhone: "",
          deviceNo: "",
          deviceCarrier: "",
        },
      ], //新增弹出层的循环
      dialogFormVisible:false,
    }
 },
 methods: {
   // 新增
    add() {
      this.dialogFormVisible = true;
    },
	// 新增 - 添加信息
    addInformation() {
      this.addList.push({
        personName: "",
        personPhone: "",
        deviceNo: "",
        deviceCarrier: "",
      });
    },
     // 新增 - 删除信息
    deleteInformation(val) {
      if (this.addList.length > 1) {
        this.addList.splice(val, 1);
      } else {
        this.$message({
          message: "不可全部删除，最少一条新增数据信息",
          type: "warning",
        });
      }
    },
    // 新增 - 确定
    determine() {
      console.log("新增列表", this.addList);
    },
    // 新增 - 取消
    cancel() {
      this.dialogFormVisible = false;
    },
}