基于vue2+element制作增删查改demo

jadetii

已于 2023-05-18 20:13:32 修改

阅读量682

点赞数

分类专栏：前端杂记文章标签： vue.js elementui javascript

于 2023-04-22 20:52:05 首次发布

本文链接：https://blog.csdn.net/qq_53832794/article/details/130309928

版权

文章描述了一个Vue.js应用中关于表单查询、编辑和删除功能的实现，以及遇到的问题和改进方案。在初次编辑时因未初始化表单导致的问题通过设置默认值解决。提出了组件拆分和职责明确的优化策略，强调了解耦原则在函数和组件设计中的重要性。

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

<template>
  <div>
    <!-- 功能渲染 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="formInline.stuId" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button 
          type="primary" 
          icon="el-icon-search" 
          @click="onSubmit(formInline.name,formInline.stuId)">查询</el-button>

        <el-button 
          icon="el-icon-refresh" 
          @click="resetQuery">重置</el-button>

        <el-button 
          type="success" 
          icon="el-icon-plus" 
          @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据渲染 -->
    <el-table 
      :data="displayData" 
      style="width: 90%; margin: auto" >
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column label="姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="学号" prop="stuId" align="center"></el-table-column>
      <el-