【 Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus 第三篇】(持续更新中)

在第二篇我们主要学习了@路径别名，配置.env环境变量，封装axios请求，以及使用api获取数据后渲染 Element Plus表格

本期需要掌握的知识如下:

• 封装列表模糊查询组件
• 实现新增 编辑 删除 模糊查询 重置 功能
• 实现表单校验功能
• 实现组件间传值

下期需要掌握的知识如下:

• 项目中导入 VueRouter
• 使用 VueRouter 完成路由跳转、获取路由信息
• VueRouter 模块化、路由拦截器
• 权限路由配置

本期实现效果如下：

简单做个梳理

1. 创建 table 表格,第二篇文章已经讲过，没看过的请看上一篇文章
2. 封装 新增 / 编辑弹窗组件
3. 封装 模糊查询组件

1. home页 , table表格以及要封装的 模糊查询组件 弹窗组件在此体现

<div class="home">    <div class="table-title">      Vue3 + setup 语法糖 + Element Plus 实现 table 增删改查    </div>    <div class="table-content">            <searchComponent @hanleSearchTable="hanleSearchTable" @handleAdd="handleAdd" />            <el-table :data="tableData" style="width: 100%" border stripe>        <el-table-column v-for="{id,prop,label} in tableColumn" :prop="prop" :key="id" :label="label" :width="label=='序号' ? 100 :''" align="center" />        <el-table-column fixed="right" label="操作" align="center" width="240">          <template #default="scope">            <el-button link type="primary" size="small" @click="handlEmodify(scope.row)">编辑</el-button>            <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>            <el-button link type="primary" size="small" @click="handlDetail(scope.row)">查看</el-button>          </template>        </el-table-column>      </el-table>    </div>        <rowFrom ref="rowFromComponent" @submitFrom="submitFrom" />  </div>

解释说明

searchComponent和 rowFrom 都是封装的子组件

组件上所看到的 @hanleSearchTable都是子组件触发父组件的方法， = 前是子组件方法名， =后为当前组件也就是home页面的方法

import { ref, onMounted, defineComponent } from 'vue'import { useRouter } from 'vue-router'import { MessageBoxMixins } from '@/mixin'import { ElMessage } from 'element-plus'import { getTableList } from '@/api/home.js'import rowFrom from './components/rowForm.vue'import searchComponent from './components/search.vue'/** * @type component * @description 在此注册组件 * **/const Component = defineComponent({  rowFrom, searchComponent})/** * @type data * @description 所有数据都在此体现 * **/const tableData = ref([])const dialogTitle = ref('添加')const rowFromComponent = ref(null)const Router = useRouter()const tableColumn = ref([  { id: 1, prop: 'id', label: '序号' },  { id: 2, prop: 'date', label: '时间' },  { id: 3, prop: 'name', label: '姓名' },  { id: 4, prop: 'address', label: '地址' }])/** * @type 生命周期 * @description 所有生命周期函数都在此体现 * **/onMounted(() => {  initTable()})/*** @type methods* @description 所有方法、事件都在此层中体现* **/// 初始化表格const initTable = async () => {  let res = await getTableList()  ElMessage.success('获取成功')  if (res.data) return tableData.value = res.data}// 子组件触发父组件模糊查询方法const hanleSearchTable = (searchData) => {  if (!searchData) return initTable()  if (searchData.date != null && searchData.date != '') {    let filterTableList = tableData.value.filter(item => { if (item.date == searchData.date) return item })    tableData.value = filterTableList  } else {    initTable()  }}// 添加按钮点击事件const handleAdd = () => {  if (dialogTitle !== '添加') {    dialogTitle.value = '添加'  }  // 在此触发子组件方法并传参  rowFromComponent.value.childMethod(null, dialogTitle.value)}// 编辑按钮点击事件const handlEmodify = row => {  if (dialogTitle !== '修改') {    dialogTitle.value = '修改'  }  // 调用子组件方法同时，将数据转换为非响应式  rowFromComponent.value.childMethod(JSON.parse(JSON.stringify(row)), dialogTitle.value)}// 删除按钮点击事件const handleDel = async row => {// MessageBoxMixins 封装的公共按钮提示组件  可先注释该两行代码  let res = await MessageBoxMixins('确认删除该条数据？删除后不可恢复')  if (res !== 'confirm') return false  tableData.value = tableData.value.filter(item => { if (item.id !== row.id) return item })}// 查看按钮点击事件const handlDetail = row => {  if (!row.id) return ElMessage.error('缺少id')}// 子组件弹窗确认按钮触发父组件的事件函数const submitFrom = (val, type) => {  if (type == 'add') {    const id = tableData.value.length + 1    let newRow = Object.assign({ id }, val)    tableData.value = [...tableData.value, newRow]  } else {    tableData.value.forEach((item, index) => {      if (item.id == val.id) {        tableData.value[index] = val      }    })  }  // 调用子组件方法关闭弹窗  rowFromComponent.value.btnCancel()}

新增、编辑弹窗封装

在当前文件夹下新建 components 目录，并在该目录下新建 rowForm.vue 文件

后面的模糊搜索组件也是如此 不再过多解释

• dialogTableVisible 控制弹窗打开或关闭
• dialogTitle 弹窗标题 这里使用变量的方式是为了区分 新增/编辑
• close-on-click-modal 点击空白区域不允许关闭弹窗
• row 当前表单绑定的对象
• rules 表单校验规则

<el-dialog v-model="dialogTableVisible" :title="dialogTitle + '数据'" :close-on-click-modal="false" style="width:40%;">    <el-form :rules="rules" :model="row" label-width="80px" ref="ruleFrom">      <el-form-item label="时间：" prop="date">        <el-date-picker style="width:100%;" value-format="YYYY-MM-DD" v-model="row.date" type="date" placeholder="请选择时间" />      </el-form-item>      <el-form-item label="姓名：" prop="name">        <el-input v-model="row.name" autocomplete="off" placeholder="请输入姓名" />      </el-form-item>      <el-form-item label="地址：" prop="address">        <el-input v-model="row.address" autocomplete="off" placeholder="请输入地址" />      </el-form-item>    </el-form>    <template #footer>      <span class="dialog-footer">        <el-button @click="btnCancel">取消</el-button>        <el-button type="primary" @click="btnSure">确认</el-button>      </span>    </template>  </el-dialog>  

别忘了 script 标签带 setup语法糖

import { ref } from 'vue';/** * @type data * @description 所有数据都在此体现 * **/// 控制弹窗打开/关闭 默认为 falseconst dialogTableVisible = ref(false)// 初始化当前表单const row = ref({})// 初始化 弹窗 titleconst dialogTitle = ref(null)// 获取refs元素，常量名称与ref保持一致 后边表单校验会用到const ruleFrom = ref(null)// 表单校验规则const rules = {  name: { required: true, message: "姓名不能为空!", trigger: "blur" },  date: { required: true, message: "时间不能为空!", trigger: "change" },  address: { required: true, message: "地址不能为空!", trigger: "blur" }}/*** @type methods* @description 所有方法、事件都在此层中体现* **///在此注册触发父组件的方法// 无需手动引入 defineEmits ,直接使用即可，传参必须为数组const emit = defineEmits(['submitFrom'])// 父组件调用此组件修改弹窗的标题、是否打开、以及表单数据const childMethod = (data, title) => {  dialogTitle.value = title  row.value = data ? data : {}  dialogTableVisible.value = true  setTimeout(() => {    ruleFrom.value.clearValidate()  }, 0)}// 弹窗按钮确认事件const btnSure = async () => {  try {   // 表单校验功能在此 所以要提前获取 ref元素 (ruleFrom)    await ruleFrom.value.validate()    if (dialogTitle.value == '添加') {      // 在此触发父组件的方法 用来修改/添加 tableList      emit('submitFrom', row.value, 'add')    } else {      emit('submitFrom', row.value, 'update')    }  } catch (err) {    console.log('err' + err);  }}// 弹窗按钮取消事件const btnCancel = () => {  dialogTableVisible.value = false}// 暴露组件方法以供父组件调用defineExpose({  childMethod,  btnCancel});

模糊查询组件封装

<template>  <div class="search">    <div class="search-content">      <el-form :inline="true" :model="searchData" class="demo-form-inline">        <el-form-item label="请选择时间：">          <el-date-picker value-format="YYYY-MM-DD" v-model="searchData.date" type="date" placeholder="请选择时间" />        </el-form-item>        <el-form-item>          <el-button type="success" @click="handleAdd">新增</el-button>          <el-button type="primary" @click="handleQuery">查询</el-button>          <el-button type="default" @click="handleResert">重置</el-button>        </el-form-item>      </el-form>    </div>  </div></template>

import { ref } from 'vue'/** * @type data * @description 所有数据都在此体现 * **/const searchData = ref({  date: ''})/** * @type methods * @description 所有方法、事件都在此层中体现 * **///在此注册触发父组件的方法const emit = defineEmits(['hanleSearchTable', 'handleAdd'])// 新增按钮const handleAdd = () => { // 直接去触发父组件 handleAdd 方法 // 让父组件再去触发 新增弹窗的方法  emit('handleAdd')}//  查询按钮const handleQuery = () => {  // 这里同样如此 不过需要携带查询参数  emit('hanleSearchTable', searchData.value)}// 重置按钮const handleResert = () => {  searchData.value = {}  emit('hanleSearchTable', null)}