vue3封装Element表格

请添加图片描述

  1. 配置表头
  2. 配置多选
  3. 配置序号
  4. 自定义操作列按钮

封装表格 Table.vue

<template><el-table:data="tableData"width="100%":maxHeight="maxHeight"v-bind="$attrs"@selection-change="handleSelectChange"@row-click="handleRowClick"><!-- 是否需要多选列表的情况 --><el-table-columnv-if="haveCheckBox"align="center"type="selection"fixed="left":reserveSelection="reserveSelection"/><!-- 是否需要展示序号 --><el-table-columnv-if="haveIndex"label="序号"align="center"type="index"width="60px"/><el-table-columnv-for="(column, index) in columns":key="index":align="column.align || 'left'"v-bind="column"min-width="100px"><template #default="scope"><template v-if="column.operate && column.operate.length"><el-buttonv-for="operate in column.operate":key="index":icon="operate.icon"@click.stop="operate.click(scope.row)":type="operate.type">{{ operate.label }}</el-button></template><slot v-else :name="column.slotName" :row="scope.row">{{ scope.row[column.prop] }}</slot></template></el-table-column><slot /></el-table>
</template><script lang="ts" setup>
const props = defineProps({tableData: {type: Array,default() {return [];},},haveCheckBox: {type: Boolean,default: false,},haveIndex: {type: Boolean,default: false,},columns: {type: Array,default() {return [];},required: true,},maxHeight: {type: [Number, String],default: "50vh",},reserveSelection: {type: Boolean,default: false,},
});
const emit = defineEmits(["select-change", "row-click"]);
// 勾选表格数改变触发的函数
const handleSelectChange = (val) => {emit("select-change", val);
};
// 表格行内点击
const handleRowClick = (row, column, event) => {emit("row-click", row, column, event);
};
</script>

调用组件示例

<template><Table:tableData="tableData":haveCheckBox="true":haveIndex="true":columns="tableColumn":stripe="true":border="true"@select-change="handleSelectChange"@row-click="handleRowClick"/>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";const tableData = ref([{date: "2016-05-03",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-04",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-01",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},
]);const tableColumn = reactive([{prop: "date",label: "日期",width: "180",align: "center",},{prop: "name",label: "姓名",width: "180",align: "center",},{prop: "address",label: "地址",width: "280",align: "left",},{prop: "userid",label: "用户ID",width: "180",align: "center",},{prop: "username",label: "用户名",width: "180",align: "center",},{prop: "password",label: "密码",width: "180",align: "center",},{prop: "role",label: "角色",width: "180",align: "center",},{prop: "status",label: "状态",width: "180",align: "center",},{prop: "createTime",label: "创建时间",width: "180",align: "center",},{prop: "updateTime",label: "更新时间",width: "180",align: "center",},{prop: "remark",label: "备注",width: "180",align: "center",},{prop: "operation",label: "操作",width: "280",align: "center",fixed: "right",operate: [{label: "编辑",icon: 'Edit',type: "primary",click: (row: any) => {ElMessage.success("点击了编辑" + row.name);}},{label: "删除",icon: 'Delete',type: "danger",click: (row: any) => {ElMessage.error("点击了删除" + row.name);}}]},
]);const handleSelectChange = (selection: any) => {ElMessage.success("选择了" + selection[0].name);console.log(selection);
};
const handleRowClick = (row, column, event) => {ElMessage.success("点击了" + row.name);console.log(row);console.log(column);console.log(event);
};
</script>
<style lang="scss" scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker搭建LNMP环境实战(10):大结局!脚本化一次性安装测试、生产环境

实现使用 Docker 在一台服务器上搭建支持 80、443 端口访问的测试、生产双站点系统。 1、生产环境&测试环境的规划和部署 1.1、说明 图1 系统部署示意图 1&#xff09;项目 此处以一个演示项目的形式来进行环境的规划和部署。此项目名称默认定义为&#xff1a;“demo”&a…

考研数学|零基础张宇全年复习规划+资料分享

可以全程张宇老师的高等数学&#xff0c;张宇老师的拿手绝活是 但是其他科目&#xff0c;还有更好的选择&#xff0c;比如线性代数&#xff0c;汤家凤老师还有李永乐老师讲的都不错&#xff0c;概率论&#xff0c;余丙森老师还有方浩老师讲的很好。下面我就讲清楚&#xff0c;…

OceanBase中左外连接和反连接的经验分享

本文作者&#xff1a;张瑞远&#xff0c;曾从事银行、证券数仓设计、开发、优化类工作&#xff0c;现主要从事电信级IT系统及数据库的规划设计、架构设计、运维实施、运维服务、故障处理、性能优化等工作。 持有Orale OCM,MySQL OCP及国产代表数据库认证。 获得的专业技能与认证…

uniapp开发小程序生成和扫描二维码

uniapp中生成二维码和扫码二维码 1.首先建立一个可运行的小程序 2. 安装uqrcodejs 安装了cnpm后,使用cnpm命令也行 npm install uqrcodejs 3. 安装成功后,在这里就能看到了 4. 代码 <template><button @click="ShowTwoCodeClick">生成二维码</…

linux内核驱动在本机编译与交叉编译

linux内核驱动具有通用性&#xff0c;可以在内核驱动中跟随系统一同编译&#xff0c;也可以通过模块形式编译。 这里介绍写在模块形式编译时本机编译与交叉编译的配置。 源代码是一样的&#xff0c;只需要修改makefile文件即可。 这里以一个RK3588的驱动为例。 1. 本机编译…

MyBatis细节注意

1.参数占位符:${}和#{} #{}&#xff1a;占位符会将传入的值安全地转义&#xff0c;防止SQL注入攻击&#xff0c;它会在预编译阶段将占位符替换为一个问号 ?&#xff0c;然后通过PreparedStatement设置参数值&#xff0c;从而确保安全性。适用于实际参数值作为参数传递给SQL语句…

Java 图形用户界面

JFrame JFrame是Java中用于创建图形用户界面(GUI)的顶级容器类。 JFrame类是Swing库中的一个关键组件&#xff0c;它代表一个窗口&#xff0c;可以向其中添加各种GUI组件来构建应用程序的用户界面。以下是JFrame的一些基本用法和特性&#xff1a; 创建JFrame对象&#xff1a…

240330-大模型资源-使用教程-部署方式-部分笔记

A. 大模型资源 Models - Hugging FaceHF-Mirror - Huggingface 镜像站模型库首页 魔搭社区 B. 使用教程 HuggingFace HuggingFace 10分钟快速入门&#xff08;一&#xff09;&#xff0c;利用Transformers&#xff0c;Pipeline探索AI。_哔哩哔哩_bilibiliHuggingFace快速入…

ChatGPT引领学术风潮:写作技巧与实践

ChatGPT无限次数:点击直达 ChatGPT引领学术风潮&#xff1a;写作技巧与实践 引言 在当今信息爆炸的时代&#xff0c;各行各业对于内容创作的需求日益增长&#xff0c;人们追求更高效、更优质的写作工具。ChatGPT作为一款具有自我学习和生成文本能力的先进AI技术&#xff0c;成…

【计算机视觉】四篇基于Gaussian Splatting的SLAM论文对比

本文对比四篇论文&#xff1a; [1] Gaussian Splatting SLAM [2] SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM [3] Gaussian-SLAM: Photo-realistic Dense SLAM with Gaussian Splatting [4] GS-SLAM: Dense Visual SLAM with 3D Gaussian Splatting …

汇编语言——用INT 21H 的A号功能,输入一个字符串存放在内存,倒序输出

用INT 21H 的A号功能&#xff0c;输入一个字符串“Hello, world!”&#xff0c;存放在内存&#xff0c;然 后倒序输出。 在DOS中断中&#xff0c;INT 21H是一个常用的系统功能调用中断&#xff0c;它提供了多种功能&#xff0c;其中A号功能用于字符串的输入。 在使用这个功能时…

高级排序算法:归并排序(优化版)

题目描述 leecode第912题&#xff1a;排序数组&#xff1a; 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;nums [5,1,1,2,0,0] 输出&…

【PSINS工具箱】基于工具箱,自己设计的轨迹,并生成IMU数据和三维视图(完整代码)

完整代码 在有工具箱的情况下&#xff0c;直接运行代码&#xff0c;即可 % 基于PSINS工具箱的三维轨迹生成、三维图像绘制与IMU数据生成 % date:2024-2-13 % Evand&#xff08;evandworldqq.com&#xff09; % Ver1 clear;clc;close all; glvs ts 0.1; % sampling int…

RuntimeError: CUDA error: an illegal memory access was encountered

前言 我在跑深度学习模型。其中卷积用CUDA写的。数据集是cifar10。在运行了1个epoch后&#xff0c;就报错&#xff1a;RuntimeError: CUDA error: an illegal memory access was encountered。这个错误是在调用loss.backward()方法时出现的。 在网上看了很多方法&#xff0c;有…

linux自定义命令

文章目录 1、自定义命令介绍2、自定义命令步骤 (centos7)2.1 新建隐藏目录存放自定义命令脚本文件2.2 将新建的目录配置环境变量2.3 取别名的方式简化已有命令2.4 编写自定义命令脚本 1、自定义命令介绍 不管是linux系统还是windows系统都支持自定义命令&#xff0c;windows端…

学习 C++ 一定要搭配 Linux 吗?

学习C并不一定非要搭配Linux&#xff0c;但使用Linux环境进行学习和开发确实有其独特的优势&#xff0c;尤其对于深入理解和实践某些高级主题及特定领域的开发工作。以下是关于是否需要搭配Linux学习C的详细分析&#xff1a; 为了帮助您更好地入门并深入掌握C&#xff0c;我们精…

PLC的大脑和心脏——CPU及西门子S7-1200CPU分类、CPU型号及端子接线图示例

CPU不断地采集输入信号&#xff0c;执行用户程序&#xff0c;刷新系统的输出。 根据供电方式和输入/输出方式的不同&#xff0c;西门子S7-1200 CPU分为3类&#xff0c;如下图1。 图1 CPU的分类 第1对字母&#xff0c;表示CPU的供电方式&#xff0c;AC&#xff08;Alternating…

Python实现的网页爬虫示例

当然可以。以下是一个使用Python实现的基础网页爬虫示例。这个示例将使用requests库来发送HTTP请求&#xff0c;并使用BeautifulSoup库来解析HTML文档。如果你还没有安装这两个库&#xff0c;请先使用pip进行安装&#xff1a; pip install requests beautifulsoup4接下来是网页…

代码随想录第25天|216.组合总和III 17.电话号码的字母组合

216.组合总和III 216. 组合总和 III - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 和组合问题有啥区别&#xff1f;回溯算法如何剪枝&#xff1f;| LeetCode&#xff1a;216.组合总和III_哔哩哔哩_bilibili 找出所有相加之和为 n 的 k 个数的组…

【KingSCADA】播放语音

1.函数介绍 PlaySound(string strWaveFileName, int nMode);下面是官方帮助文档中的解释&#xff1a; 2.生成语音文件 3.使用脚本播放音频文件 将音频文件存放在工程目录下面&#xff0c;我存放在了…\Resources\文件夹下&#xff1a; 我简单的写了一个定时1分钟播放一次语…