02 elementplus前端增删改查【小白入门SpringBoot+Vue3】

视频教程来源于 B站青戈
https://www.bilibili.com/video/BV1H14y1S7YV

只用elementplus，学点增删改查，还没有于后端连接起来，具体在下一篇

搭建一个小页面，显示数据

补充：webstorm格式化代码，修改了快捷键 Alt + F 。

利用elementplus官网的组件，来到src/views/HomeView.vue ，先搭建一个小按钮，使用el-button标签，然后加一个表格标签。这是静态页面

<template>
  <div class="box">
    <el-button class="button" type="primary" round>按钮el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"/>
      <el-table-column prop="name" label="Name" width="180"/>
      <el-table-column prop="address" label="Address"/>
    el-table>
  div>
template>

<style>
.box{
  margin: 20px;
}
style>

紧接着，在表格里面加点数据，官网里面就有的

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
script>

讲讲，为什么上面这样子加入数据，能完全对应到表格中。

表格每列数据，有个prop属性，其属性值是date，然后加入数据的时候，date: '2016-05-02' ，里面的date就是属性值，这样就能把’2016-05-02’，对应放到 prop="date"这一列。其他列同理。

，label=“Date”，表示这一列，显示给用户看的列名为Date ，也可以改成中文“日期”

，width=“180”，表示这一列的宽度为180 ，可以根据需要更改。若删除width=“180”，那么列宽由系统自适应。

增加数据

预想，点击按钮，增加数据，有个弹窗，让用户填写要增加的数据。

弹窗，用Dialog 组件，如下图，点击红框处，会弹出一个表单，是我们想要的内容a6

然后就复制对应代码，放到src/views/HomeView.vue

  
  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        el-select>
      el-form-item>
    el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancelel-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        el-button>
      span>
    template>
  el-dialog>    

上面只是复制粘贴，得到静态页面，真正实现点击弹窗表单，还需要在js写代码。
elementplus官网也有对应的js的代码，可以参考写进去，相应的reactive, ref也要导入才能正常使用。

• ref表示数据是响应式的，若有更改，会及时改变。但凡用到ref类型的数据值，必须加value

• dialogFormVisible 的值是布尔值，true或false

import {reactive, ref} from "vue";
const dialogFormVisible = ref(false)      //表单是否弹出来
const form = reactive({})  //表单数据

接着，弹窗出来的表单，需根据实际情况，进行相应更改。

• 对照官网的弹窗表单效果图，可发现，label="Promotion name"，label的值，对应弹窗表单的左边文本；
• 于是，可以对照上面表格的的列信息，修改弹窗表单的左边文本。
• 相应地，label-width表示表单左边文本的宽度，文本宽度可以统一写在上一级标签元素，即 。

 原本
<el-form :model="form" >
 <el-form-item label="Promotion name" :label-width="formLabelWidth">
  <el-input v-model="form.name" autocomplete="off"/>
 <el-form-item>
      
修改后
<el-form :model="form" label-width="80px" style="padding-right: 40px">
 <el-form-item label="日期">
  <el-input v-model="form.date" autocomplete="off"/>
 <el-form-item>

• title=“Shipping address” ，title对应弹窗的标题文本们可以按需修改，即title=“信息”

原本
<el-dialog v-model="dialogFormVisible" title="Shipping address">
    
修改
<el-dialog v-model="dialogFormVisible" title="信息">

• 弹窗表单的按钮文本，默认是英文"Cancel"，修改为中文“取消” 。Confirm翻译为“确认”

原本
<el-button @click="dialogFormVisible = false">Cancelel-button>

修改
<el-button @click="dialogFormVisible = false">取消el-button>

如下图可以明显看出修改的属性值，在弹窗显示中做出了相应改变。

弹窗的表单静态页面信息编辑好了，还需要把点击”增加数据“按钮，出来弹窗的功能做好，修改按钮的代码如下。

原始
<el-button class="button" type="primary" round >按钮el-button>

修改
<el-button class="button" type="primary" round @click="dialogFormVisible=true">新增数据el-button>

下个功能。

弹出表单窗口，填写好数据，点击”确认“按钮后，需要把数据插入到表格中。那么在“确认”按钮中，加入监听函数。

原始的
<el-button type="primary" @click="dialogFormVisible = false">确认el-button>

修改后
<el-button type="primary" @click="save">确认el-button>

相应地，要把save函数具体实现什么功能的代码写到js。

tableData.push()函数可以把数据插入到表格末尾（补充，tableData名字来源于 ，这表格的数据绑定在tableData上）。

但是push函数插入的数据类型要求一致，tableData此时是对象类型数据，而我们的from表单数据是reactive类型，类型不匹配。

为了保持类型一致，必须改变其中一个类型。所以改变tableData的类型，改为reactive响应式数据。

<script setup>
const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

])

const save = ()=>{
  // 向表格添加数据
  tableData.push(form);
  // 关闭弹窗
  dialogFormVisible.value = true; 
}

script>

发现了问题。

关闭弹窗后，再打开，仍然保留上次输入的数据，这样不行。每次打开弹窗，输入框的数据需要保持清空。

为了实现这个功能，需要增加一个函数。

原来
<el-button class="button" type="primary" round @click="dialogFormVisible=true">新增数据el-button>

修改
<el-button class="button" type="primary" round @click="handleAdd()">新增数据el-button>

handleAdd()函数对应的js代码

// form改成let类型，是因为const数据原则上不可更改，但是let可以
let form = reactive({})

const handleAdd = ()=>{
  // 打开弹窗
  dialogFormVisible.value=true;
 //  清空数据。这样子不会指向上次的遗留数据 ，还会清空上次遗留的数据。
  form = reactive({})
}

编辑、删除数据

在页面上，增加“编辑”、“删除”。去elementplus官网寻找合适的样式组件，如下图，看中了右边红色框中的样式

复制对应代码，并适当修改。

补充：

• 在Vue3中，#default="scope"是一种用于处理列表渲染的语法。它允许在父组件中定义一个插槽，并通过子组件将数据传递给插槽。这样就可以在父组件中使用子组件的数据，并根据需要进行渲染。
• scope.row→拿到每一行的数据
• scope.$index→拿到每一行的index
• @click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件

原始
<el-table-column fixed="right" label="Operations" width="120">
   <template #default>
     <el-button link type="primary" size="small" @click="handleClick">Detailel-button>
     <el-button link type="primary" size="small">Editel-button>
   template>
 el-table-column>

修改
<el-table-column fixed="right" label="操作" width="120">
  <template #default="scope">
    <el-button link type="primary" size="small" @click="handleClick(scope.row)">修改el-button>
   <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除el-button>
  template>
el-table-column>

修改细节如下;

• ， 新增列，其列名为“操作”，故修改label=“操作”