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

将el-table中的展开列(expand)修改成slots自定义插槽

用过element-ui的有知道,展开这个箭头无法自定义,一点办法都没有,官方根本就没提供预留任何位置给你操作。

从下面图中,可以看到有两个插槽,默认插槽和表头插槽。
在这里插入图片描述
在这里插入图片描述

我们来扩展一个自定义插槽来实现我们想要的功能。
我这里目录如下:
在这里插入图片描述
index.js 文件中(用的是模块自动导入)

const modulesFiles = require.context('@/components/ElementUi', true, /index\.vue$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {const moduleName = modulePath.replace(/^\.\/(.*)\/index\.vue$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules
}, {})const whiteList = ['ElTabs']export default vue => {for (let key in modules) {if (whiteList.includes(key)) continuevue.component(key, modules[key])}
}

main.js 文件中 (注意优先级)

import Element from 'element-ui'
import ElementUiCustom from '@/components/ElementUi'Vue.use(Element, { size: Cookies.get('size') || 'medium' })
Vue.use(ElementUiCustom)

找到node_modules\element-ui\packages\table 和 node_modules\element-ui\packages\table-column
文件夹,直接提取结合上面操作就能实现整体覆盖,当然需要注意删除一部分组件代码,想el-tooltip 这里面的代码是用到语法不支持想项目的编译,不过不急,删除不支持的文件导入即可。

接下来只需要找到两个位置就能实现我们需要达到我们的目的了

  • 找到src\components\ElementUi\ElTable\config.js
  • 约67行位置找到expand键对应的函数,最好是全替换一下,这个代码块是没显示行号,我注释标注了一下
expand: {renderHeader: function (h, { column }) {return column.label || ''},renderCell: function (h, { row, store, isExpanded }) {const classes = ['el-table__expand-icon']/* 判断行有改动 */  if (isExpanded && !this.$scopedSlots.expand) {classes.push('el-table__expand-icon--expanded')}const callback = function (e) {e.stopPropagation()store.toggleRowExpansion(row)}return (<div class={classes} on-click={callback}>/* 使用插槽 */{this.$scopedSlots.expand ? this.$scopedSlots.expand(isExpanded) : <i class="el-icon el-icon-arrow-right"></i>}</div>)},sortable: false,resizable: false,className: 'el-table__expand-column',},

再次找到src\components\ElementUi\ElTableColumn
找到setColumnRendershanshu :约134行位置,约149行位置用call调用一下。下面加了注释标注

    setColumnRenders(column) {// renderHeader 属性不推荐使用。if (this.renderHeader) {console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.')} else if (column.type !== 'selection') {column.renderHeader = (h, scope) => {const renderHeader = this.$scopedSlots.headerreturn renderHeader ? renderHeader(scope) : column.label}}let originRenderCell = column.renderCell// TODO: 这里的实现调整if (column.type === 'expand') {// 对于展开行,renderCell 不允许配置的。在上一步中已经设置过,这里需要简单封装一下。/* 在这里call一下this */ column.renderCell = (h, data) => <div class="cell">{originRenderCell.call(this, h, data)}</div>this.owner.renderExpanded = (h, data) => {return this.$scopedSlots.default ? this.$scopedSlots.default(data) : this.$slots.default}} else {originRenderCell = originRenderCell || defaultRenderCell// 对 renderCell 进行包装column.renderCell = (h, data) => {let children = nullif (this.$scopedSlots.default) {children = this.$scopedSlots.default(data)} else {children = originRenderCell(h, data)}const prefix = treeCellPrefix(h, data)const props = {class: 'cell',style: {},}if (column.showOverflowTooltip) {props.class += ' el-tooltip'props.style = { width: (data.column.realWidth || data.column.width) - 1 + 'px' }}return (<div {...props}>{prefix}{children}</div>)}}return column},

重点来了,如何使用呢


<el-table-column align="center" type="expand" label="拼包文本" width="80"><template #expand><el-link type="primary" :size="layoutSize" :underline="false">展开</el-link></template><template slot-scope="{ row, column: col }"><highlight :html="row.textAfterPacket" /></template>
</el-table-column>

相关文章:

将el-table中的展开列(expand)修改成slots自定义插槽

用过element-ui的有知道&#xff0c;展开这个箭头无法自定义&#xff0c;一点办法都没有&#xff0c;官方根本就没提供预留任何位置给你操作。 从下面图中&#xff0c;可以看到有两个插槽&#xff0c;默认插槽和表头插槽。 我们来扩展一个自定义插槽来实现我们想要的功能。…...

接入网概述

接入网概述 接入网基本概念接入网“最后一公里”解决方案数字用户线xDSL技术的发展与特点xDSL的局限性PON网络架构小结 接入网基本概念 在家里终端设备连接ONT然后进入接入网&#xff0c;这个接入网大概在2-20km左右&#xff0c;中间是通过光纤进行连接&#xff0c;是无源的&a…...

嵌入式要卷成下一个Java了吗?

不会&#xff01; 说不会也是有自己的原因的 前几天写了一篇 Linux 和单片机的文章 不做Linux就没前途吗&#xff1f; 单片机容易&#xff0c;门槛低&#xff0c;无非不就是单片机技术知识点比较少&#xff0c;特别是面向过程式的编程也更容易掌握。嵌入式 Linux 是多任务式的&…...

项目中怎么做sql优化?

背景&#xff1a; 系统用着用着突然出现卡&#xff0c;数据加载慢。这个时候有可能是sql查询问题导致的。这个时候我们要怎么排查这个问题呢。如果排查后是sql问题的话我们应该怎么优化呢&#xff01; 处理方案&#xff1a;第一步定位 可以开启MySQL的慢查询日志&#xff0c;设…...

第三章 图论 No.12欧拉回路与欧拉路径

文章目录 定义欧拉路径的性质&#xff1a;1123. 铲雪车边编号输出欧拉路径&#xff1a;1184. 欧拉回路点编号字典序最小输出欧拉路径&#xff1a;1124. 骑马修栅栏并查集判断有向图是否存在欧拉路径&#xff1a;1185. 单词游戏 定义 小学一笔画问题&#xff0c;每条边只经过一次…...

kubernetes(二)

文章目录 1. kubernetes常用资源1.1 deployment资源1.2 deployment升级和回滚1.3 tomcat连接mysql1.4 wordpress 2. kubernetes的附加组件2.1 kubernetes集群配置dns服务2.2 kubernetes的dns配置文件2.3 namespace命名空间2.4 kubernetes健康检查2.4.1 健康检查livenessprobo2.…...

MATLAB算法实战应用案例精讲-【深度学习】预训练模型ELECTRAPerformer

目录 ELECTRA 1.介绍 2.模型结构 2.1 Replaced Token Detection 2.2 权重共享 2.3 更小的生成器 3...

微服务05-Sentinel流量防卫兵

随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件,主要以 流量 为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 S…...

【考研数学】概率论与数理统计 | 第一章——随机事件与概率(1)

文章目录 一、随机试验与随机事件1.1 随机试验1.2 样本空间1.3 随机事件 二、事件的运算与关系2.1 事件的运算2.2 事件的关系2.3 事件运算的性质 三、概率的公理化定义与概率的基本性质3.1 概率的公理化定义3.2 概率的基本性质 写在最后 一、随机试验与随机事件 1.1 随机试验 …...

【设计模式】建造者模式

建造者模式&#xff08;Builder Pattern&#xff09;使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 一个 Builder 类会一步一步构造最终的对象。该 Builder 类是独立于其他对象的。 介绍 …...

网络安全---正则回溯

目录 一、题目引入 二、举出回溯例子进行分析 第一步&#xff1a; 正则往前匹配 第二步&#xff1a;匹配到头 第三步&#xff1a;往回匹配 第四步&#xff1a;直到分号结束 &#xff08;匹配上&#xff09; 原因&#xff1a; 三、进入正题一&#xff08;分析题型&#…...

压测秒杀场景常见问题

很多人在做秒杀场景的压测时&#xff0c;经常出现以下两个问题&#xff1a; 1&#xff0c;用自己的笔记本电脑瞬间发起1000个请求 2&#xff0c;没有使用虚拟ip&#xff08;发起的请求都是同样的一个ip&#xff09; 其实现在很多人在做秒杀压测的时候&#xff0c;都会遇到这两…...

【python】【sql】格式化注意事项

如果需要格式化表名到 sql 语句&#xff0c;sql 引擎是不支持的。 所以表名需要用字符串格式化&#xff0c;但其他参数最好用 sql 自带的格式&#xff0c;这样就不用去调一些细节&#xff0c;比如字符串的值是否要带引号之类的。 比如&#xff1a; cur.execute(SELECT {0} FR…...

leetcode做题笔记71

给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&#xff1b;此外…...

啥是 Python?学了他能干嘛?

最近在学 python&#xff0c;真心感觉这玩意太牛了&#xff0c;你能想到&#xff0c;想不到的事情他都能做&#xff0c;前两天也是总结了一下 python 的特点&#xff0c;分享给大家看看~ 与君共勉 历史篇 1989年圣诞节&#xff0c;当大家都在忙着包装礼物&#xff0c;享受节日…...

百日筑基篇——Pandas学习三(pyhton入门八)

百日筑基篇——Pandas学习三&#xff08;pyhton入门八&#xff09; 文章目录 前言一、数据排序二、字符串处理三、数据合并方法1. merge方法2. concat方法 四、分组数据统计五、数据重塑1. stack2. pivot 总结 前言 上一篇文章介绍了一下pandas库中的一些函数&#xff0c;而本…...

【Android Framework系列】第10章 PMS之Hook实现广播的调用

1 前言 前面章节我们学习了【Android Framework系列】第4章 PMS原理我们了解了PMS原理&#xff0c;【Android Framework系列】第9章 AMS之Hook实现登录页跳转我们知道AMS可以Hook拦截下来实现未注册Activity页面的跳转&#xff0c;本章节我们来尝试一下HookPMS实现广播的发送。…...

Mysql锁实战

mysql版本&#xff1a;8.0.32 通过实战验证mysql的Record lock 与 Gap lock原理 准备工作 设置隔离级别为&#xff1a;RR&#xff0c;以及innodb状态输出锁相关信息 show variables like %innodb_status_output_locks%; show variables like %isolation%;set global innodb_…...

HCIP-OpenStack发放云主机

1、云中的概念 在云平台注册了一个账号&#xff0c;这个账号对于云平台来说&#xff0c;就是一个租户或者一个项目。 租户/项目&#xff08;tenant/project&#xff09;&#xff0c;租户就是项目的意思。主机聚合就是主机组的意思。 region&#xff08;区域&#xff09;&…...

时序预测 | MATLAB基于扩散因子搜索的GRNN广义回归神经网络时间序列预测(多指标,多图)

时序预测 | MATLAB基于扩散因子搜索的GRNN广义回归神经网络时间序列预测(多指标,多图) 目录 时序预测 | MATLAB基于扩散因子搜索的GRNN广义回归神经网络时间序列预测(多指标,多图)效果一览基本介绍程序设计学习小结参考资料效果一览...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...