You编程__封装ElementPlus通用组件(会持续更新...)

YOU编程__封装ElementPlus通用组件(会持续更新…)

1、通用表格组件

  • CommonTable.vue
<template><div><el-form :model="query" inline class="query-form"><el-form-item><el-input v-model="query.keyword" placeholder="请输入关键词"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="handleAdd">添加</el-button></el-form-item></el-form><el-table :data="tableData" class="data-table"><el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column><el-table-column label="操作"><template v-slot="scope"><el-button type="text" @click="handleEdit(scope.row)">修改</el-button><el-button type="text" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><el-paginationbackgroundlayout="prev, pager, next":total="total"@current-change="handlePageChange"/></div>
</template><script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'const props = defineProps({columns: {type: Array,required: true},data: {type: Array,required: true},total: {type: Number,required: true}
})const emits = defineEmits(['query', 'add', 'pageChange', 'edit', 'delete'])const query = ref({keyword: ''
})const tableData = ref(props.data)
const totalRecords = ref(props.total)watch(() => props.data, (newData) => {tableData.value = newData
})const handleQuery = () => {ElMessage.success('查询功能触发')emits('query', query.value)
}const handleAdd = () => {ElMessage.success('添加功能触发')emits('add')
}const handleEdit = (row) => {ElMessage.success('修改功能触发')emits('edit', row)
}const handleDelete = (row) => {ElMessage.success('删除功能触发')emits('delete', row)
}const handlePageChange = (page) => {ElMessage.success(`当前页: ${page}`)emits('pageChange', page)
}
</script><style>
.query-form{margin-top: 20px;
}
.data-table{width: 100%;margin: 0px 0px 20px 0px;
}
</style>
  • 使用示例
<template><div><CommonTable:columns="columns":data="tableData":total="total"@query="handleQuery"@add="handleAdd"@edit="handleEdit"@delete="handleDelete"@pageChange="handlePageChange"/></div>
</template><script setup>
import { ref } from 'vue'
import CommonTable from '@/components/CommonTable.vue'const columns = ref([{ prop: 'name', label: '名称' },{ prop: 'age', label: '年龄' },{ prop: 'address', label: '地址' }
])const tableData = ref([{ name: 'John Doe', age: 30, address: 'New York' },{ name: 'Jane Doe', age: 25, address: 'Los Angeles' }
])const total = ref(50)  // 假设总记录数为50const handleQuery = (query) => {console.log('查询条件:', query)// 在这里添加查询逻辑
}const handleAdd = () => {console.log('触发添加功能')// 在这里添加添加逻辑
}const handleEdit = (row) => {console.log('修改行:', row)// 在这里添加修改逻辑
}const handleDelete = (row) => {console.log('删除行:', row)// 在这里添加删除逻辑
}const handlePageChange = (page) => {console.log('当前页:', page)// 在这里添加分页逻辑
}
</script>

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

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

相关文章

htmlcss面试题总结

网络中使用最多的图片格式有哪些 jpg, png, svg,webp,bmp; 请简述css盒子模型 盒子模型是指html的每个元素都像一个盒子&#xff0c;可以设置宽高&#xff0c;主要由content box&#xff0c;padding box&#xff0c;border&#xff0c; 和margin组成 视频/音频标签的使用 …

js栈的队列

// 定义 Queue 类 class Queue {constructor() {// 使用两个栈来模拟队列this.stack1 [];this.stack2 [];}// 入队操作&#xff0c;将元素添加到队列末尾enqueue(element) {// 将 stack1 中的元素移到 stack2while (this.stack1.length > 0) {this.stack2.push(this.stack…

Kithara设置专用CPU

设置专用 CPU 目录 设置专用 CPU 点击WINDOWS R&#xff0c;运行对话框打开&#xff0c;输入“msconfig”并确认确定。 现在会弹出一个对话框&#xff0c;您可以在其中更改 Windows 的某些设置。打开名为“引导”的第二个选项卡。 选择要配置为使用专用模块的操作系统。通常…

2024年道路运输企业主要负责人试题

1、【多选题】下列关于客运车辆管理的说法中&#xff0c;正确的有( )。(ABCE) A、道路旅客运输企业是客运车辆技术管理的责任主体。 B、道路运输经营者应当建立车辆技术档案制度&#xff0c;实行一车一档。 C、车辆所有权转移、转籍时&#xff0c;车辆技术档案应当随车移交。…

移远通信发布两款Wi-Fi 6模组新品:率先采用亚马逊ACK SDK for Matter方案实现互联互通

6月26日 &#xff0c;在MWC上海展上&#xff0c;全球领先的物联网整体解决方案供应商移远通信联合亚马逊及上海博通现场宣布&#xff0c;推出支持亚马逊Alexa Connect Kit &#xff08;ACK&#xff09;SDK for Matter方案的MCU Wi-Fi 6模组FLM163D和FLM263D。 后续&#xff0c;…

vite vue3使用axios解决跨域问题

引入依赖 npm install axios 在main.js中全局引入 import { createApp } from vue import App from ./App.vue import axios from axiosconst app createApp(App)// 全局引入axios app.config.globalProperties.$axios axiosapp.mount(#app) 修改vite.config.js的代理配置…

VBA 利用VBA查找Excel单元格内容备忘

What后的内容是要查找的文本。 lookat是查找的模式&#xff0c;xlWhole&#xff1a;是一致匹配查找&#xff0c;xlPart&#xff1a;是部分匹配查找。 需要注意的是需要判断查找的Range是否存在&#xff0c;不进行判断直接用的话容易发生错误。 Sub FindCell()Dim rngFind As…

Embedding是什么?为什么重要?

本文为 Simon Willison 在 PyBay 上发表的演讲视频的文字改进版 原文链接&#xff1a; https://simonwillison.net/2023/Oct/23/embeddings/ 演讲视频链接&#xff1a; https://youtu.be/ArnMdc-ICCM Embedding 是一个非常巧妙的技术&#xff0c;但常常和一堆令人生畏的术…

vscode中快捷生成自定义vue3模板

需求描述 新建 vue 文件后&#xff0c;需要先写出 vue3 的基础架构代码&#xff0c;手动输入效率低下&#xff01; 期待&#xff1a;输入 v3 按 Tab 即刻生成自定义的vue3模板&#xff08;如下图&#xff09; 实现流程 vscode 的设置中&#xff0c;选择 用户代码片段 输入 vue…

STL中的迭代器定义类型以及优缺点?

在C的Standard Template Library (STL)中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一种设计模式&#xff0c;它允许程序员遍历容器&#xff08;如vector、list、map等&#xff09;中的所有元素&#xff0c;而无需了解容器底层的具体实现。迭代器就像一个指针&…

GPU技术全景:推动未来计算的新动力-4

7.中国厂家 在中国市场&#xff0c;也有几家本土企业在GPU领域崭露头角&#xff0c;虽然市场份额相对较小&#xff0c;但在国产替代和自主可控的浪潮下发展迅速&#xff0c;包括但不限于&#xff1a; •沐曦集成电路、壁仞科技、燧原科技、登临科技、摩尔线程等&#xff0c…

使用dd命令测试Linux服务器IO性能

哈喽,大家好,我是木头左! 什么是dd命令? 在Linux系统中,dd(disk dump)是一个用于复制和转换文件的标准工具。它可以读取和写入数据,支持多种不同的格式和选项。dd命令是Linux系统管理员和开发人员常用的一个命令,因为它简单、高效、灵活。在本篇文章中,将介绍如何使…

列顺序占用存储大小的影响 in Oracle、MySQL、PostGreSQL

列顺序占用存储大小的影响 in Oracle、MySQL、PostGreSQL 在创建表时&#xff0c;如果相同的列类型&#xff0c;不同表列的顺序是否会影响数据库占用空间大小&#xff1f;使用oracle、mysql或postgresql是不是相同的表现呢&#xff1f; 不是的Postgresql近期发现空间使用会因为…

Fizz Buzz 经典问题 - 蓝桥杯

基础知识要求&#xff1a; Java&#xff1a;方法、if else语句、算术运算符、逻辑运算符、Scanner类 Python&#xff1a; 方法、if else语句、算术运算符、逻辑运算符、input() 题目&#xff1a; 思路解析&#xff1a; 读取输入&#xff1a; 从标准输入或其他方式读取一个整数…

DC/AC电源模块:效率与可靠性兼备的能源转换解决方案

BOSHIDA DC/AC电源模块&#xff1a;效率与可靠性兼备的能源转换解决方案 随着科技的迅速发展和人工智能技术的逐渐成熟&#xff0c;各种电子设备的需求也日益增加。然而&#xff0c;这些设备往往需要不同的电压和电流来正常工作&#xff0c;而供电方式却可能不尽相同。这时&am…

NIST网络安全框架体系应用

NIST网络安全框架体系应用 NIST网络安全框架&#xff08;NIST Cybersecurity Framework, NIST CSF&#xff09;由美国国家标准与技术研究院&#xff08;NIST&#xff09;发布&#xff0c;是一套广泛应用于各种组织的网络安全管理指南。该框架通过识别、保护、检测、响应和恢复…

单元测试,一直转圈,既不报错也不运行结束(ssm junit4 test )

修改dataSource.properties文件 然后把mysql.version的版本修改为8.x.x 如果没有效果&#xff0c;再看看连接数据库的用户名和密码是否正确&#xff0c;一般是连接数据库出了错&#xff0c;单元测试才回一直转圈&#xff0c;我是检查了一上午才发现&#xff0c;用户名错了。 检…

Redis 数据类型和各自的使用场景

Redis 数据类型和各自的使用场景 1、String类型2、List类型3、Hash类型4、Set类型5、Zset类BitMap&#xff1a;HyperLogLog&#xff1a;GEO&#xff1a;.Stream&#xff1a;跳表 常见的有五种数据类型&#xff1a;String字符串&#xff0c;List列表&#xff0c;Hash哈希&#x…

一天跌20%,多只可转债“腰斩”,近百只跌破面值,“退可守”的香饽饽为何破防?

专业人士指出&#xff0c;近期部分可转债大跌原因主要有两点&#xff1a;一方面&#xff0c;转债市场与权益市场联动性强。另一方面&#xff0c;近期公布的宏观经济数据稳中趋缓&#xff0c;“供强需弱”特征依然明显&#xff0c;证监会主席吴清发言及“科创板八条”新规延续了…

在举办数字化营销活动前该如何做客户画像和制定营销方案

在当今数字化时代&#xff0c;举办成功的营销活动离不开对客户的精准了解。而根据产品属性来描绘客户画像&#xff0c;并据此制定营销方案&#xff0c;是提高营销效果的关键。 一、产品属性分析 首先&#xff0c;咱们得好好琢磨一下产品本身。比如说&#xff0c;如果是一款…