vue2 el-table 封装

vue2 el-table 封装

  1. 在 custom 文件夹下面创建 tableList.vue
  2. 直接上代码(代码比较多,复制可直接用)
<template><div class="mp-list"><el-tableref="multipleTable"class="mp-custom-table":data="tableData"    v-loading="fullLoading":highlight-current-row="highlightCurrentRow":row-class-name="rowClassName":border="isBorder":reserve-selection="false"@row-click="handleClickRow"@current-change="handleCurrentChange":row-key="rowKey":default-expand-all="defaultExpandAll":expand-row-keys="expandRowKeys"@expand-change="expandChangeClick"@header-click="handleClickHeader"doLayout:stripe="true":default-sort="defaultSort"@selection-change="handleSelectionChange"@filter-change="filterChangeFn"@row-dblclick="ondblclick"width="100%":height="tableHeight":max-height="maxHeight"@select="select"@select-all="selectAll":header-cell-style="headerCellStyle"@cell-mouse-enter="cellMouseEnter"@cell-mouse-leave="cellMouseLeave"@sort-change="sortChange":key="statusKey"><el-table-column v-if="selecShow" :align="selecShowAlign" :selectable="selectable" type="selection" width="60"></el-table-column><el-table-column v-if="needSerialNumber" type="index" :label="serialNumberName"></el-table-column>// 行详情插槽<template v-if="expand"><slot name="expand"></slot></template><!-- theadData 配置项加了showOverTip字段,控制当前列是否使用tooltip,不传默认原来true --><template v-for="(item, idx) of theadData"><el-table-column:label="item.title":width="item.width":prop="item.field":sortable="item.sortable":key="`${item.field || item.prop}_${idx}`":min-width="item.minWidth":align="cellAlign":class-name="item.highlight ? 'mp-highlight' : ''":sort-by="item.sortBy":filter-placement="'bottom'":filters="item.filters":filter-method="item.filterMethod":filter-multiple="false":columnKey="item.field":sort-method="item.sortFn":show-overflow-tooltip="item.showOverTip !== undefined ? item.showOverTip : true"><!-- 给列表的th添加提示icon,鼠标进过后显示tooltip,配置theadData时,配置headerTip内容,则展示到此,未配置不展示icon --><template slot="header" v-if="item.headerTip"><span>{{ item.title }}<el-tooltip effect="dark" placement="top" :content="item.headerTip"><i class="el-icon-info"></i></el-tooltip></span></template><template slot-scope="scope"><slot v-if="item.isSlot" :name="item.field" :scope="scope" :row="scope.row" :column="scope.column" :store="scope.store" :_self="scope._self"></slot><div v-else><div v-if="item.htmlCustom && typeof item.htmlCustom === 'function'" v-html="item.htmlCustom(scope.row, scope.column, scope.row[item.field], item.field) || '--'"></div><span v-else>{{ fieldDeel(scope.row, item.field) || '--' }}</span></div></template></el-table-column></template><template slot="empty"><div class="mp_tatble_nodata">// 表格数据为空时,显示暂无数据图片// 图片根据自己的主题,更换合适的图片<img class="mp_noData_image" src='/img/dark_no_data.png' alt /><p class="mp_tatble_txt">暂无数据</p></div></template><slot name="slotTip"></slot><slot name="operbtn"></slot><!-- other 是为了处理表格列key在某个子对象下,父组件正常循环 --><slot name="other"></slot></el-table></div>
</template><script>
export default {name: 'tableList',props: {//表格高亮当前选中行highlightCurrentRow: {default: false,},expand: {type: Boolean,default: false,},rowKey: {type: String,default: 'id',},expandRowKeys: {type: Array,default: () => [],},// table高度,接收StringtableHeight: {default: false,},maxHeight: {type: String,default: '100%',},tableData: Array, // 表格内容theadData: {type: Array,}, // 表头内容fullLoading: Boolean, // 加载遮罩sid: String,selecShow: {// 是否有选择框type: Boolean,default: false,},selecShowAlign: {type: String,default: 'left'},isBorder: {type: Boolean,default: true,},bk_obj_name: '',cellAlign: {type: String,default: 'left',},//设置表头样式headerCellStyle: {type: Object,},serialNumberName: {type: String,default: '序号',},needSerialNumber: {type: Boolean,default: false,},defaultExpandAll: {type: Boolean,default: false,},// 默认排序defaultSort: {type: Object,default: {prop: 'date',},},rowClassName: {type: Function,},},data() {return {idSelection: [],statusKey: 0,}},created() {},methods: {fieldDeel(row, field) {let arr = field.split('.')let text = rowarr.forEach((item) => {text = text[item]})if (text == 0) {text = text + ''}return text},handleClickHeader(col, e) {// 点击某一表头if (col && col.sortable) {}},filterChangeFn(filter) {if (typeof this.$parent.getFilterValueFn === 'function') {this.$parent.getFilterValueFn(filter)}},handleClickRow(row, col, e) {//点击某一行跳转if (col && col.className) {if (col.className == 'mp-highlight') {this.$emit('handleClickRow', row, col, this.bk_obj_name)}}},ondblclick(row, col, e) {// 某一行的双击事件this.$emit('ondblclick', row, col)},toggleSelection(rows, selected) {this.$nextTick(() => {if (rows) {rows.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row, selected)})} else {this.$refs.multipleTable.clearSelection()}})},// 单行设置高亮setCurrentRowHandel(row) {this.$nextTick(() => {this.$refs.multipleTable.setCurrentRow(row[0])})},refreshLayout() {this.$nextTick(() => {this.$refs.multipleTable.doLayout()})},// 展开航expandChangeClick(row, expandRow) {this.$emit('expandChange', row, expandRow)},handleSelectionChange(val) {// 多选this.idSelection = []val.forEach((item) => {this.idSelection.push(item[this.sid])})this.$emit('changeData', this.idSelection, val)this.$emit('queryRow', val)},selectable(row, index) {// 是否禁用多选let state = trueif (row.typeFlagOrganization) {state = !row.typeFlagOrganization}return state},// 手动勾选数据行的 Checkbox 时触发的事件select(selection, row) {this.$emit('select', selection, row)},selectAll(selection) {this.$emit('select-all', selection)},cellMouseEnter(row, column, cell, event) {this.$emit('cell-mouse-enter', { row, column, cell, event })},cellMouseLeave(row, column, cell, event) {this.$emit('cell-mouse-leave', { row, column, cell, event })},// 点击表格行时选中handleCurrentChange(row) {// this.$refs.multipleTable.toggleRowSelection(row)if (this.highlightCurrentRow) {//有高亮效果可单选 ---平面图资产关联使用this.$emit('handleCurrentChange', row)}},formatterCellval(row, column, cellValue, index) {// 没有内容时的占位符,暂时无用if (typeof this.$parent.customFormatterCellval === 'function') {// 判断外部是否有customFormatterCellval方法const value = this.$parent.customFormatterCellval(row, column, cellValue, index)return value} else {// 没有-赋值给表格if (!Boolean(cellValue)) {return '--'} else {return cellValue}}},// 排序方法sortFn(a, b) {},// 监听排序事件sortChange(data) {this.$emit('sort-change', data)},},watch: {theadData: {handler(vv) {},deep: true,}},
}
</script><style>
.el-table__body-wrapper tr:hover .mp-highlight {color: #2579ff;cursor: pointer;
}.el-tooltip__popper {max-width: 800px;
}td.mp-highlight:hover {color: #2579ff;cursor: pointer;
}.el-table__header thead th .cell .el-table__column-filter-trigger i.el-icon-arrow-down {position: absolute;top: 6px;left: auto;color: #666;transform: scale(1);
}.el-table__header thead th .cell .el-table__column-filter-trigger i.el-icon-arrow-down:before {content: '\e790';
}.mp-custom-table {font-size: 14px;/* border-radius:10px; */
}.el-table__header-wrapper {border-radius: 0;
}.el-table__header-wrapper .cell .el-icon-info {cursor: pointer;opacity: 0.4;
}
.el-table__header-wrapper .cell .el-icon-info:hover {opacity: 0.8;
}/* .el-table__body-wrapper{border-radius:10px;
} */.el-table--border th {border-right: none;
}.el-table--border td {border-right: none;
}.mp-custom-table .el-table--striped .el-table__body tr.el-table__row--striped td {background-color: RGBA(247, 248, 252, 1) !important;
}.mp-list.mp-custom-table .el-table__body-wrapper tr:hover td {background-color: RGBA(231, 244, 255, 1) !important;
}.mp-custom-table .el-table--border,
.el-table--group {border-left: none;border-right: none;border-top: none;
}.mp-custom-table .el-table--border::after,
.el-table--group::after,
.el-table::before {background-color: transparent !important;
}.mp-custom-table.el-table .el-table__body-wrapper {padding-bottom: 0px;
}.mp-custom-table.el-table .el-table__fixed-right {height: calc(100% - 10px) !important;
}.mp-custom-table.el-table .el-table__fixed-right::before {background-color: transparent !important;
}.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar {width: 5px;height: 8px;background-color: #fff;border-radius: 5px;border-left: none;
}.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar-track,
.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 999px;
}.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar-thumb {background-clip: content-box;background: rgba(0, 0, 0, 0.01);box-shadow: none;
}/* .el-table.mp-custom-table.el-table__body-wrapper:hover::-webkit-scrollbar-thumb {background: red;
} */.el-table.mp-custom-table .el-table__body-wrapper::-webkit-scrollbar-corner {background: transparent;
}.mp_tatble_nodata {/* padding: 40px 0; */display: flex;align-items: center;flex-flow: column;justify-content: center;
}.mp_noData_image {width: 80px;height: 80px;
}.mp_tatble_txt {font-size: 14px !important;
}
</style>
<style>
.mp-list.mp-custom-table .el-table__header thead tr th {background: rgba(242, 244, 248, 1) !important;color: rgba(68, 79, 89, 1) !important;
}
.eveningTheme .el-table__body-wrapper tr:hover .mp-highlight {color: #07f6ff !important;
}
</style>
<style lang="scss" scoped>
.eveningTheme {.el-table__body-wrapper tr:hover .mp-highlight {color: #07f6ff !important;}.mp-custom-table ::v-deep .el-table__header thead tr th {background: #062540 !important;// color:#fff !important;}.mp-custom-table {::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {background-color: #062540 !important;}::v-deep .el-table__body-wrapper tr:hover td,::v-deep .el-table--striped .el-table__body tr.el-table__row--striped:hover td {background-color: #153864 !important;}::v-deep .el-table__body-wrapper tr:hover .mp-highlight {color: #07f6ff;cursor: pointer;}::v-deep td.mp-highlight:hover td {color: #07f6ff;cursor: pointer;}::v-deep .el-table__body-wrapper {&::-webkit-scrollbar {width: 5px;height: 5px;background-color: transparent;border-radius: 5px;border-left: none;&-track {background-color: #020919;}&-thumb {background-color: #07639d;}}}::v-deep .el-table__body-wrapper:hover {&::-webkit-scrollbar {&-thumb {background-color: #153864;}}}::v-deep.el-table {tr {background-color: #020919 !important;}}}
}
::v-deep .mp-disabled-row,
::v-deep .mp-list.mp-custom-table .el-table__body-wrapper tr.mp-disabled-row:hover,
::v-deep .mp-custom-table .el-table--striped .el-table__body tr.el-table__row--striped.mp-disabled-row {td {//border-top: 1px dashed rgba(62, 127, 255, 1);border-bottom: 1px dashed rgba(62, 127, 255, 1);background: rgba(62, 127, 255, 0.2) !important;}
}
</style>
<style lang="scss">
.eveningTheme {.mp-list.mp-custom-table .el-table__header thead tr th {background: #071d30 !important;// color:rgba(68, 79, 89, 1) !important;;}
}
</style>
  1. 组件简单使用 (基本常用的属性方法都已封装进去 , 可自行查看 tableList.vue )
    (如果缺少需要的功能,可自行补充,或者留言)
/**:selecShow="true"    // 开启复选框:tableData="dataTableListInfo"   // 表格数据:theadData="option.column"  // 表格头部:fullLoading="loading"  // 表格loading@queryRow="selectDataTable"  // 表格多选事件@handleClickRow="getHandleClickRow"  // 行点击事件*/
<template><div><table-operationclass="mp-custom-table":selecShow="true":tableData="dataTableListInfo":theadData="option.column":fullLoading="loading"@queryRow="selectDataTable"@handleClickRow="getHandleClickRow"ref="tableRef">// 该字段使用了插槽  对数据做了处理<template slot="keyNode" slot-scope="{ row }"><span>{{ row['keyNode'] == 1 ? '否' : '是' }}</span></template>// 表格按钮组<el-table-column slot="operbtn" label="操作" width="160" fixed="right"><template slot-scope="{ row }"><mp-button type="text" class="mp-button_edit-custom mp-button_table-typeA-custom" @click="editFormTable(row)">编辑</mp-button><mp-button type="text" class="mp-button_edit-custom mp-button_table-typeA-custom" @click="deleteFormTable(row)">删除</mp-button></template></el-table-column></table-operation>// 分页组件<mp-pagination :pageIndex="pageIndex" :pageSize="pageSize" :total="total" @page-change="pageChange" @page-size-change="pageSizeChange"></mp-pagination></div>
</template>
<script>
import TableOperation from '@/custom/tableList' // 引入上面的表格组件
export default {components: {TableOperation,},data() {return {dataTableList: [],loading: false,pageIndex: 1, //页码pageSize: 10, //分页条目数total: 0, // 总条数option: {column: [{field: 'indexName',highlight: true,  // 鼠标移入表格行后,指标名称字段高亮   点击指标名称 跳转title: '指标名称', //  给列表的th添加提示icon,鼠标进过后显示tooltip,配置theadData时,配置headerTip内容,则展示到此,未配置不展示iconheaderTip: '检测内容定义的名称',},{field: 'indexCode',title: '唯一标识',headerTip: 'cmdb 中字段唯一标识',},{field: 'keyNode',title: '是否关键指标',headerTip: '标记',// 该字段是否使用插槽isSlot: true, //插槽}],}, // 表头}},methods:{// 编辑editFormTable(row){},deleteFormTable(row) {// 这里是表格行删除事件},// 多选selectDataTable(row, data) {},// 每一行的指标名称点击事件getHandleClickRow(row) {},// 分页pageChange(pageIndex) {this.pageIndex = pageIndex},// 分页每页条数pageSizeChange(pageSize) {this.pageIndex = 1this.pageSize = pageSize},}
}
</script>
  1. 效果
    在这里插入图片描述

  2. 扩展(分页组件)

    1. 在 custom 文件夹下 新建 mpPagination.vue
    2. 上代码
// mpPagination.vue<template><!-- 分页 --><div class="avue-crud__pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageIndex":page-sizes="pageSizeOption":page-size="pageSize":pager-count="showPagingCount":layout="layout":total="total":key="keyIndex"></el-pagination></div>
</template><script>
export default {name: 'MpPagination',props: {index:{type:Number,default:0},//总条数total: {type: Number,default: 0,},//当前页pageIndex: {type: Number,default: 1,},//页码按钮的数量,当总页数超过该值时会折叠showPagingCount: {type: Number,default: 7,},//每页条目数pageSize: {type: Number,default: 10,},//配置功能布局layout: {type: String,default: 'total, sizes, prev, pager, next, jumper',},//选择每页条目数pageSizeOption: {type: Array,default() {return [10, 20, 50]},},},data() {return {keyIndex:0}},methods: {//每页条目数改变handleSizeChange(val) {this.$emit('page-size-change', val,this.index)},//当前页改变handleCurrentChange(val) {this.$emit('page-change', val,this.index)},},
}
</script>
  1. 以上为全部代码!

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

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

相关文章

Ubuntu18.4中安装wkhtmltopdf + Odoo16配置【二】

deepin Linux 安装wkhtmltopdf 1、先从官网的链接里下载linux对应的包 wkhtmltopdf/wkhtmltopdf 下载需要的版本&#xff0c;推荐版本&#xff0c;新测有效&#xff1a; wkhtmltox-0.12.4_linux-generic-amd64.tar.xz 2、解压下载的文件 解压后会有一个wkhtmltox文件夹 3…

【opencv】计算机视觉基础知识

目录 前言 1、什么是计算机视觉 2、图片处理基础操作 2.1 图片处理&#xff1a;读入图像 2.2 图片处理&#xff1a;显示图像 2.3 图片处理&#xff1a;图像保存 3、图像处理入门基础 3.1 图像成像原理介绍 3.2 图像分类 3.2.1 二值图像 3.2.2灰度图像 3.2.3彩色图像…

党建引领·和谐共建——赤岗街首届微型社区养老服务公益博览会开幕

服务咨询平台&#xff0c;让社区长者更便捷地了解到养老相关政策、信息。 本次活动由赤岗街公共卫生委员会、赤岗街道办事处、中国老龄事业发展基金会老年维权基金管理委员会主办&#xff0c;珠影社区居委会、广州市穗星社会工作服务中心、广州市盈泽信息科技有限公司承办&…

4/5G互操作 EPSFB讲解

今天我们来讲一下4/5G之间之间互操作&#xff0c;以及5G的EPSFB是基于什么实现的~ 目录 4/5G互操作 重选 切换 基于覆盖的切换 基于业务的切换 两个面试问题 想要加快4G切换5G的速度&#xff0c;调哪个参数怎么调高效&#xff1f; 想要减慢5G切换4G的速度调哪个参数怎…

项目计划阶段项目管理文档(风险管理、软件估计、立项、计划)

项目计划过程支撑文件&#xff1a; 1、风险和机会管理表 2、软件估计书模板 3、立项通知 4、项目计划书 软件开发全文档获取&#xff1a;点我获取 1、风险和机会管理表 2、软件估计书模板 3、立项通知 4、项目计划模板

Spring简单的存储和读取

前言 前面讲了spring的创建&#xff0c;现在说说关于Bean和五大类注解 一、Bean是什么&#xff1f; 在 Java 语⾔中对象也叫做 Bean&#xff0c;所以后⾯咱们再遇到对象就以 Bean 著称。这篇文章还是以spring创建为主。 二、存储对象 2.1 俩种存储方式 需要在 spring-conf…

A++ 敏捷开发-1 如何改善

1 如何改善 敏捷开发过程改进案例 5月 A公司一直专门为某电信公司提供针对客服、线上播放等服务服务。 张工是公司的中层管理者&#xff0c;管理好几个开发团队&#xff0c;有5位项目经理向他汇报。 他听说老同学的团队都开始用敏捷开发&#xff0c;很感兴趣&#xff0c;便参…

kafka中的常见问题处理

文章目录 1. 如何防⽌消息丢失2. 如何防⽌重复消费3. 如何做到消息的顺序消费4. 如何解决消息积压问题4.1 消息积压问题的出现4.2 消息积压的解决⽅案 5. 实现延时队列的效果5.1 应用场景5.2 具体方案 1. 如何防⽌消息丢失 ⽣产者&#xff1a;1&#xff09;使⽤同步发送 2&…

C语言——有一个3*4的矩阵,要求求出其中值最大的那个元素的值,以及其所在的行号和列号

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int i,j,row0,colum0,a[3][4]{{1,2,3,4},{9,8,7,6},{-10,10,-5,2}};int maxa[0][0];for ( i 0; i < 3; i)//行&#xff08;row&#xff09;{for ( j 0; j < 4; j)//列&#xff08;colum&#xf…

Microsoft Remote Desktop高效、安全、稳定的远程办公解决方案

在今天的数字化时代&#xff0c;Remote Desktop远程办公已成为许多人的日常生活。无论你是因为工作需要&#xff0c;还是因为在家中需要访问公司服务器&#xff0c;微软远程连接软件都是一个理想的选择。 微软远程连接软件Remote Desktop是一款高效、安全、稳定的远程办公解决…

sublime Text使用

1、增加install 命令面板 工具(tool)->控制面板(command palette) -> 输入install ->安装第一个install package controller&#xff0c;以下安装过了&#xff0c;所以没展示 2、安装json格式化工具 点击install package&#xff0c;等几秒会进入控制面板&#xff0…

R语言30分钟上手

文章目录 1. 环境&安装1.1. rstudio保存工作空间 2. 创建数据集2.1. 数据集概念2.2. 向量、矩阵2.3. 数据框2.3.1. 创建数据框2.3.2. 创建新变量2.3.3. 变量的重编码2.3.4. 列重命名2.3.5. 缺失值2.3.6. 日期值2.3.7. 数据框排序2.3.8. 数据框合并(合并沪深300和中证500收盘…

B 树和 B+树 的区别

文章目录 B 树和 B树 的区别 B 树和 B树 的区别 了解二叉树、AVL 树、B 树的概念 B 树和 B树的应用场景 B 树是一种多路平衡查找树&#xff0c;为了更形象的理解。 二叉树&#xff0c;每个节点支持两个分支的树结构&#xff0c;相比于单向链表&#xff0c;多了一个分支。 …

WSL2 docker GUI 界面

在 WSL2 docker 中运行GUI界面。 具体流程和远程显示Ubuntu界面类似&#xff0c;链接, 更简单一点&#xff0c; 少了 ssh 的部分。 安装好wsl2 和 docker wsl2 运行GUI程序&#xff0c;windows 会默认弹出窗口。 可以安装 gedit 测试一下 windows 下载并运行 Xlaunch. 运行 d…

(二) Windows 下 Sublime Text 3 安装离线插件 Anaconda

1 下载 Sublime Text 3 免安装版 Download - Sublime Text 2 下载 Package Control&#xff0c;放到 Sublime Text Build 3211\Data\Installed Packages 目录下。 Installation - Package Control 3 页面搜索 anaconda anaconda - Search - Package Control Anaconda - Pac…

python opencv -模板匹配

python opencv -模板匹配 模板匹配就是&#xff0c;我们现有一个模板和一个图片&#xff0c;然后&#xff0c;在这个图片中寻找和模板近似的部分。 在opencv 中主要通过cv2.matchTemplate这个函数去实现。 下面我们先看一下&#xff0c;模板图片和需要匹配的图片&#xff1a…

HTML-标签之文字排版、图片、链接、音视频

1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签&#xff0c;带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html&#xff1a;整个网页head&#xff1a;网页头部&#xff0c;存放给浏览器看的代码&#xff0c;例如CSSbody…

计算机网络——数据链路层

目录 一、数据链路层的基本概念 &#xff08;一&#xff09;数据链路层的概念 &#xff08;二&#xff09;帧 &#xff08;三&#xff09;数据链路层分为哪两个部分 &#xff08;1&#xff09;LLC&#xff08;逻辑控制访问&#xff09; &#xff08;2&#xff09;MAC&…

入侵redis之准备---VMware上面安装部署centos7镜像系统【详细含云盘镜像】

入侵redis之准备—VMware上面安装部署centos7镜像系统【详细含云盘镜像 其他文章&#xff1a; 入侵redis并实现反弹shell控制【实战一】 学习大概步骤如下 第一步:先学习怎么安装部署kail系统服务器 入侵redis之准备—VMware安装部署kail镜像服务器【详细包含云盘镜像】 第二…

【论文阅读】1 SkyChain:一个深度强化学习的动态区块链分片系统

SkyChain 一、文献简介二、引言及重要信息2.1 研究背景2.2 研究目的和意义2.3 文献的创新点 三、研究内容3.1模型3.2自适应分类账协议3.2.1状态块创建3.2.2合并过程3.2.3拆分过程 3.3评价框架3.3.1性能3.3.1.1共识延迟3.3.1.2重新分片延迟3.3.1.3处理事务数3.3.1.4 约束 3.3.2 …