Vue3+Vite+Element-Plus实现CRUD常见表单项目

效果有 查询，增加，表格，删除，编辑

其实CRUD，就是一个管理项目最常见的功能
C增加 (Create)
R读取 (Read)
U更新 (Update)
D删除 (Delete)

一、创建项目

vue3用vite创建项目

1 对应路径cmd 输入 npm create vite@latest
2 Ok to proceed? 输入 y
3 Project name 输入 项目名称
4 Select a framework 选择 Vue
5 Select a variant 选择 JavaScript

cd 项目名称；npm install；npm run dev

二、引入element-plus

• 安装

npm install element-plus --save

• 配置main.js文件

import { createApp } from 'vue'
import App from './App.vue'
//element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

createApp(App).use(ElementPlus,{ locale: zhCn}).mount('#app')

三、基本内容

直接在 App.vue添加内容，分为3大模块

<template>
  <el-col :span="20" class="table-box">
    <!--title 标题-->
    <div class="title">
      <h2>最简单的 CRUD Demo</h2>
    </div>
    <!--query 查询-->
    <div class="query-box">
      <el-col :span="8">
        <el-input v-model="queryInput" placeholder="请输入姓名搜索" />
      </el-col>
      <div>
        <el-button type="primary" @click="handleAdd">增加</el-button>
        <el-button type="danger" @click="handleListDel" v-if="multipleSelection.length > 0">删除</el-button>
      </div>
    </div>
    <!--table 表格-->
    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
      ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="email" label="邮件" width="120" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="state" label="状态" width="120" />
      <el-table-column prop="address" label="地址" width="300" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="danger" size="small" @click="handleRowDel(scope.row.id)">删除</el-button>
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-col>
</template>

模拟数据

let tableData = ref([
  {
    id: 1,
    name: 'Tom1',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 20,
    name: 'Tom2',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    name: 'Tom3',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },

])

四、添加弹窗

    <el-dialog v-model="dialogFormVisible" :title="dialogType === 'add' ? '新增' : '编辑'">
      <el-form :model="tableForm" label-width="auto">
        <el-form-item label="姓名">
          <el-input v-model="tableForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="tableForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="tableForm.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="tableForm.state" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="tableForm.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>

五、增加功能

• 打开页面 dialogFormVisible等于ture是显示

const handleAdd = (val) => {
  tableForm.value = {}
  dialogType.value = "add"
  dialogFormVisible.value = true
}

• 确认添加

const dialogConfirm = () => {
  if (dialogType.value === 'add') {
    tableData.value.push({
      id: tableData.value.length + 1,
      ...tableForm.value
    })
  } else {
    let index = tableData.value.findIndex(item => item.id === tableForm.id);
    tableData[index] = tableForm
  }
  dialogFormVisible.value = false
}

六、删除功能

//删除一条按钮
const handleRowDel = (id) => {
  console.log(id)
  let index = tableData.value.findIndex(item => item.id === id)
  tableData.value.splice(index, 1)
}

//删除多条
const handleListDel = () => {
  multipleSelection.value.forEach(id => {
    handleRowDel(id)
  })
  multipleSelection.value = [];
}

七、编辑功能

const handleEdit = (val) => {
  tableForm.value = val
  dialogType.value = "edit"
  dialogFormVisible.value = true
}

八、查询功能

//监控数据
watch(queryInput, (val) => {
  if (val.length > 0) {
    tableData.value = tableData.value.filter(item => item.name.toLowerCase().match(val.toLowerCase()));
  } else {
    tableData.value = tableDataCopy;
  } 
})

九、打包上线

在 vite.config.js 配置打包路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/dist/',
})

记得是 base: ‘/dist/’

然后运行

npm run build

其它UP主在b站视频讲解

Vue3.2 + Vite + Element-Plus 实现最基础的 CRUD

最终完整代码

<template>
  <el-col :span="20" class="table-box">
    <!--title 标题-->
    <div class="title">
      <h2>最简单的 CRUD Demo</h2>
    </div>
    <!--query 查询-->
    <div class="query-box">
      <el-col :span="8">
        <el-input v-model="queryInput" placeholder="请输入姓名搜索" />
      </el-col>
      <div>
        <el-button type="primary" @click="handleAdd">增加</el-button>
        <el-button type="danger" @click="handleListDel" v-if="multipleSelection.length > 0">删除</el-button>
      </div>
    </div>
    <!--table 表格-->
    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
      ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="email" label="邮件" width="120" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="state" label="状态" width="120" />
      <el-table-column prop="address" label="地址" width="300" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="danger" size="small" @click="handleRowDel(scope.row.id)">删除</el-button>
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--dialog 弹窗-->
    <el-dialog v-model="dialogFormVisible" :title="dialogType === 'add' ? '新增' : '编辑'">
      <el-form :model="tableForm" label-width="auto">
        <el-form-item label="姓名">
          <el-input v-model="tableForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="tableForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="tableForm.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="tableForm.state" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="tableForm.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </el-col>
</template>

<script setup>
import { ref, watch } from 'vue'
//数据
const queryInput = ref("")
let tableData = ref([
  {
    id: 1,
    name: 'Tom1',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 20,
    name: 'Tom2',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    name: 'Tom3',
    email: "123@qq.com",
    phone: "12345678901",
    state: '在职',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  },

])
let tableDataCopy = tableData.value;
const multipleSelection = ref([]);//多选
const dialogFormVisible = ref(false);//是否打开
const formLabelWidth = "80px";//弹出框 标题长度
const tableForm = ref({})
const dialogType = ref("add")
//监控数据
watch(queryInput, (val) => {
  if (val.length > 0) {
    tableData.value = tableData.value.filter(item => item.name.toLowerCase().match(val.toLowerCase()));
  } else {
    tableData.value = tableDataCopy;
  } 
})
//选择事件
const handleSelectionChange = (val) => {
  multipleSelection.value = [];
  val.forEach(item => {
    multipleSelection.value.push(item.id)
  });
}
//添加按钮
const handleAdd = (val) => {
  tableForm.value = {}
  dialogType.value = "add"
  dialogFormVisible.value = true
}
//编辑按钮
const handleEdit = (val) => {
  tableForm.value = val
  dialogType.value = "edit"
  dialogFormVisible.value = true
}

//删除一条按钮
const handleRowDel = (id) => {
  console.log(id)
  let index = tableData.value.findIndex(item => item.id === id)
  tableData.value.splice(index, 1)
}

//删除多条
const handleListDel = () => {
  multipleSelection.value.forEach(id => {
    handleRowDel(id)
  })
  multipleSelection.value = [];
}

//确认按钮
const dialogConfirm = () => {
  if (dialogType.value === 'add') {
    tableData.value.push({
      id: tableData.value.length + 1,
      ...tableForm.value
    })
  } else {
    let index = tableData.value.findIndex(item => item.id === tableForm.id);
    tableData[index] = tableForm
  }
  dialogFormVisible.value = false
}

</script>

<style>
.table-box {
  margin: 0 auto;
}

.title {
  text-align: center;
}

.query-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>