vue+elementUI实现表格组件的封装

效果图：
在这里插入图片描述
在这里插入图片描述

在父组件使用表格组件
<table-listref="table":stripe="true":loading="loading":set-table-h="slotProps.setMainCardBodyH":table-data="tableData":columns="columns.tableList || []":radio="topicTypeListMapItem.radio"show-opearshow-selection:fix-width="240":page-data="pageData":disabled-select-key="topicTypeListMapItem.disabledSelectKey"@changeSize="changeSize"@changePage="changePage"><!--预警灯--><template #warningLight="{ row }"><div class="lightCireBlock"><div><div v-for="(item,index) in row.warningLight" :key="'warningLight'+index"><svg-icon v-if="Object.keys(columns.warningLight).includes(item)" :icon-class="columns.warningLight[item].icon" class="task-icon" /><spanv-if="columns.warningLight[item] && columns.warningLight[item].hasNum && row[`warningLight${item}`] * 1 > 0"class="fontBoxAll fontBox">{{ row[`warningLight${item}`] }}</span></div></div></div></template><!--标题--><template #taskTitle="{ row }"><span class="td-cell lineCell" @click="editMainEvent(row)"> {{ row.taskTitle }}</span></template><!--状态--><template #status="{ row }"><el-tag :disable-transitions="true" :class="columns.statusLists[row.status].className">{{ columns.statusLists[row.status].label }}</el-tag></template><!--操作--><template slot-scope="{ row }"><div class="table-buttonList"><template v-for="(item,index) in columns.btnList"><el-buttonv-if="item.isShow?item.isShow(row):true":key="index"type="text"@click="btnFn[item.clickFn.fn](row,...(item.clickFn.params?item.clickFn.params:[]))">{{ item.name }}</el-button></template></div></template></table-list>

然后用一个js文件来存储动态的参数

import { selectOverseerMeetingLeaType } from '@/api/common.js'export const topicTypeListMap = new Map([['keyWork',{name: '重点工作',radio: false, // 表格数据是否单选showImportBtn: true, // 是否显示批量导入按钮showApprovalBtn: false, // 是否显示送立项按钮showImportApprovalBtn: false, // 导入时是否显示送立项按钮showItemTypeBtn: false, // 导入时是否显示选择事项类型按钮showWorkRequireBtn: false, // 导入时是否显示批量填写工作要求按钮showFoliCureBtn: false, // 是否显示送办理按钮hasSubtasks: true, // 专题是否有子任务isMeetingTopicType: false, // 是否是会议类专题disabledSelectKey: [{ label: 'status', value: '0' }, { label: 'status', value: '1' }] // 表格哪些状态的数据禁选}],['feasibleInstructions',{name: '督办件',radio: false,showImportBtn: true,showApprovalBtn: true,showImportApprovalBtn: true, // 导入时是否显示送立项按钮showItemTypeBtn: true, // 导入时是否显示选择事项类型按钮showWorkRequireBtn: false, // 导入时是否显示批量填写工作要求按钮showFoliCureBtn: true,hasSubtasks: false,isMeetingTopicType: false,disabledSelectKey: []}]])
在组件中

props传的参数

props: {// 表格数据tableData: {type: Array,default: () => {return []}},// 表格字段columns: {type: Array,default: () => {return []}},// 表格字段的宽度fixWidth: {type: Number,default: 150},// 单选radio: {type: Boolean,default: false},// 显示序号showIndex: {type: Boolean,default: false},// 是否自定义高度setTableH: {type: Boolean,default: true},// 显示勾选showSelection: {type: Boolean,default: false},// 显示操作showOpear: {type: Boolean,default: false},spanMethod: {type: Function,default() {return () => {}}},// 斑马线stripe: {type: Boolean,default: false},// 分页showPagination: {type: Boolean,default: true},setCheckbox: {type: Boolean,default: false},loading: { // 判断是否正在加载表格数据type: Boolean,default: false},align: {type: String,default: 'left'},recordCheck: { // 是否在翻页的时候记录之前选择的表格数据type: Boolean,default: true},// 分页数据pageData: {type: Object,default: () => {return {page: 1,rows: 15,pageSize: [15, 25, 35],total: 0}}},isImportData: { // 判断是否导入的数据type: Boolean,default: false},disabledSelectKey: { // 需要禁用的选择框的数据type: Array,default: () => {return []}}},

完整代码

<template><div ref="wrap" class="wrap"><el-tableref="table":key="'tableData'+tableData.length"v-loading="loading"element-loading-text="正在处理，请稍候！":data="tableData":stripe="stripe":span-method="spanMethod":header-row-class-name="headerRowClassName(radio)":height="setTableH?setTableHeight:'100%'"class="table-list"border@sort-change="sortChange"@selection-change="handleSelectionChange"><template slot="empty"><img src="@/assets/images/empty.png"><p>暂无数据</p></template><!--选择框--><el-table-column v-if="showSelection" type="selection" width="42" :selectable="checkSelectable" /><!--序号--><el-table-column v-if="showIndex" type="index" label="序号" width="55" align="center" /><el-table-columnv-for="item in columns":key="item.lable":label="item.title":prop="item.slot || item.lable":min-width="item.minWidth || 140":width="item.width":sortable="item.sortable":show-overflow-tooltip="item.overflow":align="item.align"><!-- 二级表头 --><el-table-columnv-for="subItem in item.columns":key="subItem.label":label="subItem.title":prop="subItem.slot || subItem.lable":min-width="subItem.minWidth || 140":width="subItem.width":sortable="subItem.sortable":show-overflow-tooltip="subItem.overflow":align="subItem.align"><template slot="header"><!-- <span v-if="item.isRequest" style="color:red">*</span> --><span> {{ subItem.title }}</span></template><template slot-scope="{ row }"><slot :name="subItem.slot" :row="row"><span class="td-cell"> {{ isImportData ? row[subItem.label].value : row[subItem.label] }}</span><template v-if="isImportData"><el-popoverv-if="typeof(row[subItem.label].success) === 'boolean' && !row[subItem.label].success"placement="top"title=""trigger="hover":content="row[subItem.label].message"><i slot="reference" class="el-icon-warning" style="color:#F44336" /></el-popover></template></slot></template></el-table-column><template slot="header"><!-- <span v-if="item.isRequest" style="color:red">*</span> --><span> {{ item.title }}</span></template><template slot-scope="{ row }"><slot :name="item.slot" :row="row"><span class="td-cell">{{ isImportData ? row[item.label].value : row[item.label] }}</span><template v-if="isImportData"><el-popoverv-if="typeof(row[item.label].success) === 'boolean' && !row[item.label].success"placement="top"title=""trigger="hover":content="row[item.label].message"><i slot="reference" class="el-icon-warning" style="color:#F44336" /></el-popover></template></slot></template></el-table-column><!--操作按钮--><el-table-column v-if="showOpear" label="操作" prop="operation" :width="fixWidth" fixed="right"><template #default="{ row, $index }"><slot :row="row" :$index="$index" /></template></el-table-column></el-table><el-paginationv-if="showPagination && tableData.length>0"background:current-page="pageData.page":page-size="pageData.rows":page-sizes="pageData.pageSize"layout="sizes, prev, pager, next, slot, jumper":total="pageData.total"class="pagination"@current-change="handleCurrentChange"@size-change="handleSizeChange"><span class="pagination-total">共{{ pageData.total }}条，</span></el-pagination></div>
</template><script>
import { clone } from 'lodash'
export default {name: 'TableList',props: {// 表格数据tableData: {type: Array,default: () => {return []}},// 表格字段columns: {type: Array,default: () => {return []}},// 表格字段的宽度fixWidth: {type: Number,default: 150},// 单选radio: {type: Boolean,default: false},// 显示序号showIndex: {type: Boolean,default: false},// 是否自定义高度setTableH: {type: Boolean,default: true},// 显示勾选showSelection: {type: Boolean,default: false},// 显示操作showOpear: {type: Boolean,default: false},spanMethod: {type: Function,default() {return () => {}}},// 斑马线stripe: {type: Boolean,default: false},// 分页showPagination: {type: Boolean,default: true},setCheckbox: {type: Boolean,default: false},loading: { // 判断是否正在加载表格数据type: Boolean,default: false},align: {type: String,default: 'left'},recordCheck: { // 是否在翻页的时候记录之前选择的表格数据type: Boolean,default: true},// 分页数据pageData: {type: Object,default: () => {return {page: 1,rows: 15,pageSize: [15, 25, 35],total: 0}}},isImportData: { // 判断是否导入的数据type: Boolean,default: false},disabledSelectKey: { // 需要禁用的选择框的数据type: Array,default: () => {return []}}},data() {return {saveMultipleSelection: {}, // 用来保存每个分页勾选的数据multipleSelection: [],setTableHeight: 300}},computed: {headerRowClassName() {return (radio) => {if (radio) {return 'tableHead isRadio'} else {return 'tableHead'}}}},watch: {tableData: {handler(newVal) {this.$nextTick(() => {if (this.multipleSelection && this.recordCheck) {const idList = this.multipleSelection.map(item => { return item.businessKey })newVal.forEach(item => {if (idList.indexOf(item.businessKey) > -1) {this.$refs.table.toggleRowSelection(item, true)}})}})},deep: true},saveMultipleSelection: {handler(newVal) {this.multipleSelection = Object.keys(newVal).reduce((prev, next) => {prev = prev.concat(newVal[next])return [...new Set(prev)]}, [])this.$EventBus.$emit('selection-change', this.multipleSelection)},deep: true}},updated() {this.$nextTick(() => {this.setTableHeight = this.$refs.wrap.offsetHeight - document.querySelector('.el-table__header-wrapper').offsetHeight - 48 - 10// 10是给分页腾一点空间})},methods: {handleSizeChange(e) {this.$emit('changeSize', e)},handleCurrentChange(e) {this.$emit('changePage', e)},clearSort() {this.$refs.table.clearSort()},getSelection() {return clone(this.$refs.table.selection)},sortChange(e) {this.$emit('sortChange', e)},checkSelectable(row) {let check = trueif (this.disabledSelectKey.length > 0) {this.disabledSelectKey.forEach(item => {if (row[item.label] === item.value) {check = false}})}return check},handleSelectionChange(val) {if (this.radio) { // 单选// var newRows = val.filter((it, index) => {//   if (index === val.length - 1) {//     this.$refs.table.toggleRowSelection(it, true)//     return true//   } else {//     this.$refs.table.toggleRowSelection(it, false)//     return false//   }// })// this.saveMultipleSelection = newRowsthis.$nextTick(() => {var newRows = val.filter((it, index) => {if (index === val.length - 1) {this.$refs.table.toggleRowSelection(it, true)return true} else {this.$refs.table.toggleRowSelection(it, false)return false}})if (val.length > 0) {this.saveMultipleSelection = {}this.$set(this.saveMultipleSelection, this.pageData.page, newRows)}// this.saveMultipleSelection = newRows})} else {this.$nextTick(() => {this.$set(this.saveMultipleSelection, this.pageData.page, val)})}},toggleRowSelection(row, bool) {this.$refs.table.toggleRowSelection(row, bool)}}}
</script>
<style scoped lang="scss">.wrap{height: 100%;::v-deep .isRadio {.el-checkbox{display: none;}}}::v-deep .el-table ::-webkit-scrollbar{height: 8px;}
</style>

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

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

相关文章

【Ambari】Ansible自动化部署大数据集群

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…
阅读更多...
地面站Mission Planner从源码编译与运行

地面站Mission Planner从源码编译与运行

0. 环境 - win10&#xff08;基本需要100G硬盘&#xff09; - ubuntu18 1. 安装vs2022 下载 vs2022 community 在线安装包。 https://visualstudio.microsoft.com/ 打开 Visual Studio Installer 先安装 Visual Studio Community 2022本体。占用1.2GB。 Visual Studio Inst…
阅读更多...
批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用

批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用

目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求 在vue3项目中&#xff0c;需要批量导入某个文件夹内数量不确定的svg文件用来作为图标&#xff0c;开发完成后能够通过增减文件夹内的svg文件&a…
阅读更多...
【SpringCloud】Nacos 注册中心

【SpringCloud】Nacos 注册中心

目 录 一.认识和安装 Nacos1.Windows安装1. 下载安装包2. 解压3. 端口配置4. 启动5. 访问 2.Linux安装1. 安装JDK2. 上传安装包3. 解压4. 端口配置5. 启动 二.服务注册到 nacos1. 引入依赖2. 配置 nacos 地址3. 重启 三.服务分级存储模型1. 给 user-service 配置集群2. 同集群优…
阅读更多...
搜索与图论——拓扑排序

搜索与图论——拓扑排序

有向图的拓扑排序就是图的宽度优先遍历的一个应用 有向无环图一定存在拓扑序列&#xff08;有向无环图又被称为拓扑图&#xff09;&#xff0c;有向有环图一定不存在拓扑序列。无向图没有拓扑序列。 拓扑序列&#xff1a;将一个图排成拓扑序后&#xff0c;所有的边都是从前指…
阅读更多...
电脑端库存管理系统哪个好

电脑端库存管理系统哪个好

库存管理系统的作用是管理仓库的各种账面&#xff0c;比较常用的就是在电脑上安装电脑端的库存管理系统进行操作&#xff0c;现今如除了电脑端库存管理系统之外&#xff0c;还有一些是手机端和平板端的&#xff0c;所以我们在管理库存的时候可以选择一些多端都能操作的库存管理…
阅读更多...
刷题之Leetcode209题(超级详细)

刷题之Leetcode209题(超级详细)

209.长度最小的子数组 力扣题目链接(opens new window)https://leetcode.cn/problems/minimum-size-subarray-sum/ 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条…
阅读更多...
Pytorch数据结构：GPU加速

Pytorch数据结构：GPU加速

文章目录 一、GPU加速1. 检查GPU可用性&#xff1a;2. GPU不可用需要具体查看问题3. 指定设备4.将张量和模型转移到GPU5.执行计算&#xff1a;6.将结果转移回CPU 二、转移原理1. 数据和模型的存储2. 数据传输3. 计算执行4. 设备管理5.小结 三、to方法的参数类型 一、GPU加速 .…
阅读更多...
PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;本文已收录于Python系列专栏&#xff1a; 零基础学Python &#x1f4ac;订阅专栏后可私信博主进入Python学习交流群&#xff0c;进群可领取Python视频教程以及Python相关电子书合…
阅读更多...
【话题】程序员35岁会失业吗？

【话题】程序员35岁会失业吗？

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景招聘分析一、技术更新换代的挑战二、经验与技术的双重优势三、职业发展的多元化选择四、个人成长与职业规划的平衡五、结语文章推荐 背景 35岁被认为是程序员职业生…
阅读更多...
#{} 和 ${}区别

#{} 和 ${}区别

1、参数是Integer类型时候没区别&#xff08;#是预编译SQL&#xff0c;$是即时SQL&#xff09; 2、当参数是String类型时&#xff0c;就会出错了 &#xff08;1&#xff09;这是$的报错信息&#xff0c;因为我们的参数admin并没有加引号所以不满足字符串条件 (2)正确的SQL &am…
阅读更多...
Python实现获取某手视频评论【自动生成did】

Python实现获取某手视频评论【自动生成did】

今天在获取某手视频评论的时候&#xff0c;总是会出发风控导致web_did失效&#xff0c;就算登录了也没用&#xff0c;还会导致账号被风控&#xff0c;app端抓包和逆向难度又大&#xff0c;那么有没有一种不需要登录而且不会出发风控的方法来获取评论列表呢&#xff1f;当然有&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023