在第二篇我们主要学习了
@路径别名
,配置.env
环境变量,封装axios
请求,以及使用api
获取数据后渲染Element Plus
表格
本期需要掌握的知识如下:
模糊查询
组件新增
编辑
删除
模糊查询
重置
功能表单校验
功能组件间传值
下期需要掌握的知识如下:
VueRouter
VueRouter
完成路由跳转
、获取路由信息
VueRouter
模块化
、路由拦截器
权限路由
配置本期实现效果如下:
简单做个梳理
table 表格
,第二篇文章已经讲过,没看过的请看上一篇文章新增 / 编辑弹窗组件
模糊查询组件
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
文件
后面的模糊搜索组件也是如此 不再过多解释
<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 所有数据都在此体现
* **/
// 控制弹窗打开/关闭 默认为 false
const dialogTableVisible = ref(false)
// 初始化当前表单
const row = ref({})
// 初始化 弹窗 title
const 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)
}