当前位置: 首页 > news >正文

vue 封装Table组件

基于element-plus UI 框架封装一个table组件

在项目目录下的components新建一个Table.vue

<template><section class="wrap"><el-tableref="table":data="tableData" v-loading="loading" style="width: 100%":stripe="stripe":border="border":row-key="(row) => { return row.id }"@selection-change="handleSelectionChange":height="tableHeight">// 复选框列 type="selection"<el-table-columnv-if="selection"type="selection"width="56"align="center":fixed="fixed"></el-table-column>// 序号列 type="index"<el-table-columnv-if="index"type="index"width="56"label="序号":fixed="fixed"></el-table-column><template v-for="(item, index) in tableProps" :key="index"><el-table-column :prop="item.prop" :label="item.label" :width="item.width" :type="item.type":show-overflow-tooltip="item.showOverflowTooltip" :align="item.align":fixed="item.fixed":sortable="item.sort":formatter="item.formatter"><template v-if="item.prop === 'operation'" #default="scope"><el-button size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button><el-button size="small" type="warning" @click="handleAdd(scope.$index, scope.row)">新增</el-button></template></el-table-column></template></el-table></section>
</template><script setup>
import { ref, watch } from 'vue'const tableData = ref([])
const loading = ref(true)// 监听父组件传递过来的数据
watch(() => props.data, (val) => {tableData.value = valloading.value = false
})// 声明要触发的emits
const emits = defineEmits(['selectionChange','deleteItem', 'editItem', 'addItem'])// 父组件传递过来的props
const props = defineProps({data: {type: Array,default: () => [],},tableProps: {type: Array,},tableHeight: {type: String,default: '500'},selection: Boolean,index: Boolean,border: Boolean,stripe: Boolean,
})// 定义表格的列属性
const tableProps = ref([{type: 'selection',label: '',width: '55',align: 'center'},{type: 'index',label: 'No.',width: '55',align: 'center'},{prop: 'name',label: '姓名',width: '',showOverflowTooltip: true,align: 'center'},{prop: 'username',label: '用户名',width: 120,showOverflowTooltip: true,align: 'center'},{prop: 'email',label: '邮箱',width: '',showOverflowTooltip: true,align: 'center'},{prop: 'phone',label: '联系电话',width: '',showOverflowTooltip: true,align: 'center',// 单元格格式化函数,参考element-plus formatterformatter: (row) => {return `+86 ${ row.phone }`;},},{prop: 'website',label: '网址',width: '',showOverflowTooltip: true,align: 'center',},{prop: 'operation',label: '操作',align: 'center',formatter: (row,column) => {}}
])const handleAdd = (row) => {emits('addItem', row)
}const handleEdit = (rowData) => {emits('editItem', rowData)
}const handleDelete = (index, rowData) => {emits('deleteItem', index)
}const handleSelectionChange = (row) => {console.log('row data are: ', row[0].name)
}</script>

在具体的父组件中使用:

<template><section class="container"><section class="table-wrap"><Table :data="tableData" ref="table" borderstripe @selectionChange="handleSelectionChange" @editItem="handleEdit"@addItem="handleAdd"@deleteItem="handleDelete"></Table></section>// <span v-pre>{{ this will not be compiled }}</span></section>
</template><script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Table from '@/components/Table.vue'onMounted(() => {queryData()
})
const table = ref(null)const data = reactive({/*  materialForm: {materailName: '',materialCode: '',snCode: '',productCode: '',productName: '',result: '',workOrder: [],productLine: [],},loading: false,lineList: [],orderList: [],*/tableData: [],
})const { materialForm, lineList, orderList, tableData, loading } = toRefs(data)const title = ref("")const addData = (param) => {param.id = Math.random()// const data = Object.assign({}, param) // 拷贝一个对象const data = { ...param }// const data = JSON.parse(JSON.stringify(param)) // 深拷贝tableData.value.push(data)
}const handleAdd = () => {editRef.value.openDialog()title.value = '新增'formData.value = {}
}
const handleDelete = (index, row) => {ElMessageBox.confirm('此操作将会删除本条数据,请确定是否继续执行?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',closeOnClickModal: false,type: 'warning',}).then(() => {ElMessage({type: 'success',message: '删除成功',})tableData.value.splice(index, 1)}).catch(() => {ElMessage({type: 'info',message: '取消操作',})})
}const handleSelectionChange = () => {table.value.handleSelectionChange()
}provide('formObj', { title, formData, addData })const handleEdit = (rowData) => {title.value = '编辑'const param = {...rowData}formData.value = param// formData.value = Object.assign({}, rowData)// 避免引用传递,做一次数据拷贝// formData.value = JSON.parse(JSON.stringify(row))editRef.value.openDialog()
}const query = () => {queryData()
}const reset = (formEl) => {if (!formEl) returnformEl.resetFields()queryData()
}const queryData = () => {loading.value = true// const param = { ...materialForm.value, ...{ name: 'zhangsan', age: 20 } }fetch("https://jsonplaceholder.typicode.com/users").then((resposne) => resposne.json()).then((json) => {loading.value = falsetableData.value = json})
}</script>

相关文章:

vue 封装Table组件

基于element-plus UI 框架封装一个table组件 在项目目录下的components新建一个Table.vue <template><section class"wrap"><el-tableref"table":data"tableData" v-loading"loading" style"width: 100%":…...

MySQL主从复制错误

当在MySQL的多线程复制中遇到错误时&#xff0c;你可能会看到上述的错误信息。错误的核心在于从服务器上的工作线程在尝试执行一个特定的事务时遇到了问题。 为了解决这个问题&#xff0c;你可以采取以下步骤&#xff1a; 查看MySQL的错误日志&#xff1a;错误日志可能会提供更…...

Redis群集

目录 1、redis群集三种模式 2、Redis 主从复制 2.1 主从复制的作用 2.2 主从复制流程 2.3 搭建Redis 主从复制 3、Redis 哨兵模式 3.1 哨兵模式的作用 3.2 故障转移机制 3.3 主节点的选举 4、Redis 群集模式 4.1 集群的作用 4.2 Redis集群的数据分片 4.3 搭建Redis…...

Spring AOP以及统一处理

一.Spring AOP 1.什么是Spring AOP AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff1a;面向切面编程&#xff0c;它是一种思想&#xff0c;它是对某一类事情的集中处理。 2.AOP的作用 想象一个场景&#xff0c;我们在做后台系统时&#xff0c;除了登录…...

vue2markdown转思维导图

官网 http://markmap.js.org 按照官网安装markmap-lib,markmap-view两个依赖外&#xff0c;还需要安装markmap-common 如果报错提示vuePdfNoSss相关问题&#xff0c;需要安装vue-pdf 如果报错can’t import the named export ‘xxx’ from non EcmaScript module&#xff0c;需…...

docker下redis备份文件dump.rdb获取

1.查看镜像 docker ps -a 2.进入redis客户端 docker exec -it redis redis-cli 3.保存备份文件 save 4.查看文件存放位置 CONFIG GET dir 5.将docker中文件拷出 docker cp id或name:容器中文件的路径 目标目录地址...

二十一、MySQL(多表)内连接、外连接、自连接实现

1、多表查询 &#xff08;1&#xff09;基础概念&#xff1a; &#xff08;2&#xff09;多表查询的分类&#xff1a; 2、内连接 &#xff08;1&#xff09;基础概念&#xff1a; &#xff08;2&#xff09;隐式内连接&#xff1a; 基础语法&#xff1a; select 表1.name,…...

Zookeeper运维

我是一个目录 1. 参数说明2. Zookeeper优化建议3. Zookeeper性能查看4. 建议 1. 参数说明 工作节点瞬间压力大&#xff0c;导致和集群通信出现延迟&#xff0c;被踢出节点&#xff0c;瞬间释放的连接立即又连接到另外节点&#xff0c;最终集群挂掉。加了一些延迟配置后&#xf…...

uniapp 点击事件-防重复点击

uniapp 点击事件-防重复点击 1、common文件并创建anti-shake.js文件 // 防止处理多次点击 function noMoreClicks(methods, info) {// methods是需要点击后需要执行的函数&#xff0c; info是点击需要传的参数let that this;if (that.noClick) {// 第一次点击that.noClick f…...

推进“数智+数治”,中期科技智慧公厕驱动城市公厕更新升级发展

随着城市化的快速发展和人口的不断增加&#xff0c;公共厕所这一基础设施的更新升级成为了亟待解决的问题。过去的传统公厕往往存在着环境脏乱差、无法保证使用者的舒适度等诸多问题。而智慧公厕则能够通过互联网和物联网的技术手段&#xff0c;实现智能化的运行管理&#xff0…...

4、模板(二叉树,红黑树,STL的实现)

1. 泛型编程 2. 模板&#xff1a;参数类型化 3. 模板分类 3.1 函数模板 概念 实例化&#xff1a;隐式实例化&#xff0c;显式实例化 3.2 类模板 4. 在模板参数列表中&#xff1a;class和typename 5.模板参数列表:template <class T , size_t N> 类型参数&#x…...

了解JVM

一.了解JVM 1.1什么是JVM JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟计算机功能来实现的&#xff0c;JVM屏蔽了与具体操作系统平台相关的信息&#xff0c;Java程序只…...

vue2实现组织机构树

参考大佬文章&#xff1a;https://www.cnblogs.com/10ve/p/12573772.html 【vue——实现组织架构图(vue-org-tree)——技能提升 - CSDN App】http://t.csdn.cn/Mpe4B...

JS中BigInt的使用

JS中BigInt的使用 BigInt是一种内置对象&#xff0c;它提供了一种方法来表示大于2^53 - 1的整数&#xff0c;通俗来讲就是提供了一种可以表示任意大整数的方法&#xff0c;当我们使用Number来表示一个超过了2 ^53 - 1的整数的时候&#xff0c;会出错。所以此时我们需要使用Big…...

你的第1个 Unity 游戏!!!

简介 首先新建一个方块添加重力!!!总结首先 首先,你要先打开 U n i t y Unity Unity...

炫云云渲染3ds max效果图渲染教程

很多人在第一次使用炫云云渲染渲染效果图的时候不知道怎么使用&#xff0c;其实现在使用炫云渲染效果图真的很简单&#xff0c;我们一起来看看。 一客户端安装 1、打开炫云云渲染官网&#xff0c;点击右上角的客户端下载&#xff0c;选择炫云客户端&#xff08;NEXT版&#xf…...

Java中数组array和列表list相互转换

在Java中&#xff0c;可以将数组&#xff08;array&#xff09;和列表&#xff08;list&#xff09;相互转换&#xff0c;但需要注意一些细节和限制。以下是一些示例和说明&#xff1a; 从数组到列表&#xff1a; 使用Arrays.asList()方法&#xff1a;可以使用Arrays.asList()…...

【JavaSE笔记】数据类型与变量

一、前言 在Java这门“啰嗦”的编程语言中,我们必须弄清楚每种数据类型的性质和用途,才能让程序“说人话”。要成为Java高手&#xff0c;就必须与各种数据类型打成一片。 本文则将带你认识Java中常见的两位“角色”—数据类型与变量。 二、数据类型 在Java中数据类型主要分…...

VR全景智慧文旅解决方案,助力文旅产业转型升级

引言&#xff1a; 随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术正逐渐展露其影响力&#xff0c;改变着旅游业。VR全景智慧文旅解决方案也应运而生&#xff0c;将传统旅游的体验形式从线下扩展到了线上&#xff0c;带来了不一般的文旅体验。 一.VR全…...

采用cv2和默认的人脸识别分类器实现人脸检测功能

人脸识别分类器 haarcascade_frontalface_default 提示&#xff1a;分类器文件地址在这里&#xff1a;https://github.com/opencv/opencv/blob/687fc11626901cff09d2b3b5f331fd59190ad4c7/data/haarcascades/haarcascade_frontalface_default.xml 文章目录 人脸识别分类器 haar…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...