vue element表格的增删改查（细）

最新推荐文章于 2024-07-08 11:54:06 发布

zyj12138

最新推荐文章于 2024-07-08 11:54:06 发布

阅读量1.2k

点赞数 4

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

本文链接：https://blog.csdn.net/zyj12138/article/details/102519420

版权

本文详细介绍了如何在Vue中使用Element UI实现表格的增删改查功能。删除操作通过`splice`方法实现，查找事件通过设置`ref`并更改数据源来动态过滤。编辑和新增事件在同一模态框中处理，根据状态判断是编辑现有数据还是新增数据。

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

首先贴上完整的代码和对应图：

<template >
  <div class="hello">
    <div class="searchDiv">
      <el-col :span="4">
        <!-- 查询输入框 -->
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-button type="primary" icon="el-icon-search" @click="search(input)">搜索</el-button>
      <!-- 模态框 -->
      <el-button type="primary" @click="toAdd">新添书籍</el-button>

      <el-dialog title="添加书籍" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="书名" :label-width="formLabelWidth">
            <el-input v-model="bookName"></el-input>
          </el-form-item>

          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="bookAuthor"></el-input>
          </el-form-item>

          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="bookPrice"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="add(bookName,bookAuthor,bookPrice)">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="tableDiv">
      <el-table :data="tableData" style="width: 100%" ref="myTable">
        <el-table-column type="index" :index="inde