vue表格增删改操作

最新推荐文章于 2023-12-07 16:46:14 发布

追风筝的少女

最新推荐文章于 2023-12-07 16:46:14 发布

阅读量255

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xu_xu_0924/article/details/116303821

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文展示了如何在Vue中实现一个对话框组件用于新增IP类型，并通过表单提交数据到表格中。同时，介绍了如何实现删除功能，包括二次确认删除提示和从表格中移除数据。代码涉及了Vue的模板语法、表单处理以及对话框的关闭逻辑。

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

  <el-dialog title="新增IP类型" v-model="dialogFormVisible" width="30%">
    <el-form :model="form">
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-input v-model="form.type"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>

//新增
addData(){
     this.tableData.push({
      name:this.form.type
     });
     //tableData是表格id，from是表单id，两边的值要相对应
      this.dialogFormVisible = false
    }

//删除
handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning',
                confirmButtonText: "确定",
          cancelButtonText: "取消",
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {
                  this.$message.error('删除失败');
                });
        },