Vue3+Element-Plus安装及模拟增删改查

软件安装：nodejs16

https://nodejs.org/download/release/v16.20.0/

将npm设置为淘宝镜像：

npm config set registry https://registry.npm.taobao.org

 

创建vue3项目：

npm init vue@latest

Eleement-Plus

https://element-plus.gitee.io/zh-CN/

安装：

npm install element-plus --save

 

设置全局CSS：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

package.json内：

{
  "name": "vue3-demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.3.7",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2",
    "vue": "latest",
    "vue": "latest",
    "vue": "latest"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}

导入element-plus：

main.js中加入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

 

导入包装数据所需的组件

import {ref, reactive} from "vue";

HomeView.vue：

<template>
  <div style="padding: 10px;">
    <el-input style="width: 300px" placeholder="请输入名称" v-model="name" clearable></el-input>
    <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>
    <el-button type="primary" @click="handleAdd">新增数据</el-button>
    <div style="margin: 10px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" align="center" />
        <el-table-column prop="name" label="姓名" width="180" align="center"/>
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column label="操作">
          <template #default="scope">
              <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
              <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" title="信息">
      <el-form :model="form" label-width="120px">
        <el-form-item label="日期">
          <el-input v-model="form.date" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
  import {ref, reactive} from "vue";//导入包装数据
  const tableData = ref([
    {
      date: '2016-05-03',
      name: 'jerry',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    }
  ])
  const dialogFormVisible = ref(false)
  let form = reactive({}) //const不能修改
  const globalIndex=ref(-1)//全局保存的编辑行号
  const name=ref('')



  //新增数据 设置新的空的绑值对象 打开弹窗 进行页面渲染
  const handleAdd=()=>{
    form = reactive({})
    dialogFormVisible.value=true//打开弹窗
  }
  //保存数据,把数据插入到tableData里面，并刷新数据，弹窗关闭
  const save=()=>{
      if (globalIndex.value>=0){//表示编辑
          tableData.value[globalIndex.value] = form
          globalIndex.value=-1//还原回去
      } else {//新增
          tableData.value.push(form)
      }
    dialogFormVisible.value=false
  }

  //编辑数据，先赋值表单，再弹窗
  const handleEdit=(row,index)=>{
      const newObj = Object.assign({},row)
      form = reactive(newObj)
      globalIndex.value=index//把当前编辑的行号赋值给全局的保存的编辑的行号
      console.log(globalIndex.value)
      dialogFormVisible.value=true
  }

  //删除数据，从index的位置开始，删除一行
  const remove = (index) => {
      tableData.value.splice(index, 1)
  }

  const search = () =>{
    tableData.value = tableData.value.filter(v => v.name.includes(name.value))
  }
</script>