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

news2024/11/25 9:56:29

用过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.default
  return modules
}, {})

const whiteList = ['ElTabs']

export default vue => {
  for (let key in modules) {
    if (whiteList.includes(key)) continue
    vue.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.header
          return 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 = null
          if (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>

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

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

相关文章

【dubbo】自定义filter打印接口请求日志

目标 在应用调用dubbo接口或提供的dubbo接口被调用时&#xff0c;通过自定义的filter打印接口请求时的入参信息、服务名、方法名及返回值 实现filter 1. 自定义filter实现类 Slf4j Activate(group {"provider", "consumer"}) public class DubboProvi…

展会动态 | 迪捷软件邀您参加2023ATC汽车电子软件与软件技术周

论坛背景 随着汽车智能化和电动化的发展&#xff0c;汽车电子与软件技术已经成为汽车产业的重点方向。为促进行业创新发展&#xff0c;各大汽车厂商、供应链企业和研究机构都在积极探索新的技术和应用。 2023ATC汽车电子与软件技术周&#xff08;以下简称“技术周”&#xff…

pytest的fixture梳理

fixture特性 可以重复使用&#xff0c;多个用例可以使用同一个fixture一个测试用例可以使用多个装置 import pytest # Arrange pytest.fixture def first_entry():return "a"# Arrange pytest.fixture def second_entry():return 2# Arrange pytest.fixture def or…

Linux常用命令——dmidecode命令

在线Linux命令查询工具 dmidecode 在Linux系统下获取有关硬件方面的信息 补充说明 dmidecode命令可以让你在Linux系统下获取有关硬件方面的信息。dmidecode的作用是将DMI数据库中的信息解码&#xff0c;以可读的文本方式显示。由于DMI信息可以人为修改&#xff0c;因此里面…

【数据结构与算法】二叉搜索树

文章目录 二叉搜索树的结构二叉搜索树的实现节点的定义二叉搜索树的框架构造函数拷贝构造函数赋值运算符重载析构函数搜索操作插入操作删除操作 二叉搜索树的应用二叉搜索树的效率 二叉搜索树的结构 在浅学一下二叉树链式存储结构的遍历_链式存储二叉树按层次遍历_LeePlace的博…

【SpringBoot】| 接口架构风格—RESTful

目录 一&#xff1a;接口架构风格—RESTful 1. 认识RESTful 2. RESTful 的注解 一&#xff1a;接口架构风格—RESTful 1. 认识RESTful &#xff08;1&#xff09;接口 ①接口&#xff1a; API&#xff08;Application Programming Interface&#xff0c;应用程序接口&…

NLP文本匹配任务Text Matching [有监督训练]:PointWise(单塔)、DSSM(双塔)、Sentence BERT(双塔)项目实践

NLP文本匹配任务Text Matching [有监督训练]&#xff1a;PointWise&#xff08;单塔&#xff09;、DSSM&#xff08;双塔&#xff09;、Sentence BERT&#xff08;双塔&#xff09;项目实践 0 背景介绍以及相关概念 本项目对3种常用的文本匹配的方法进行实现&#xff1a;Poin…

物联网和不断发展的ITSM

物联网将改变社会&#xff0c;整个技术行业关于对机器连接都通过嵌入式传感器、软件和收集和交换数据的电子设备每天都在更新中。Gartner 预测&#xff0c;全球将有4亿台互联设备投入使用。 无论企业采用物联网的速度如何&#xff0c;连接设备都将成为新常态&#xff0c;IT服务…

iVX引领自动编程新时代:从百万应用到普适AST转换的技术突破

一、引言 在人工智能和自动编程的交汇点上&#xff0c;iVX以其独特的自动编程训练模型&#xff0c;正引领着新一轮的技术革命。通过百万个通过iVX IDE生成的应用进行有监督训练&#xff0c;iVX成功地将任意网站或网页转成了iVX IDE中的AST&#xff0c;展示了其强大的技术实力。…

浅谈GIS和三维GIS的区别?

GIS&#xff08;地理信息系统&#xff09;和三维GIS&#xff08;3D地理信息系统&#xff09;是地理信息领域的两个重要概念&#xff0c;它们在地理数据的处理和分析方面具有不同的特点和应用。可能很多人分不清二者的区别&#xff0c;本文就带大家简单了解一下二者的区别。 定义…

【闲侃历史】 唐朝----安史之乱那些事(1)

说到安史之乱&#xff0c;可谓是唐朝最乱的一段时期&#xff0c;据说唐朝当时也就5000多万人&#xff0c;而经历了这一战&#xff0c;人口只剩1000多万人了。著名的杨国忠和杨贵妃也是在这个时候死的。这个系列我们就先来侃侃发起安史之乱的两个人----安禄山和史思明 一. 安禄…

免费插件集-illustrator插件-Ai插件-路径编辑-统一线宽

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.示例6.总结 1.介绍 本文介绍一款免费插件&#xff0c;加强illustrator使用人员工作效率&#xff0c;统一路径线宽。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&am…

2023年05月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;输出第二个整数 输入三个整数&#xff0c;把第二个输入的整数输出。 时间限制&#xff1a;1000 内存限制&#xff1a;65536 输入 只有一行&#xff0c;共三个整数&#xff0c;整数之间由一个空格分隔。整数是32位有符号整数。 输出 只有一行&#xff0c;一个整…

支持M1 Syncovery for mac 文件备份同步工具

Syncovery for Mac 是一款功能强大、易于使用的文件备份和同步软件&#xff0c;适用于需要备份和同步数据的个人用户和企业用户。Syncovery 提供了一个直观的用户界面&#xff0c;使用户可以轻松设置备份和同步任务。用户可以选择备份的文件类型、备份目录、备份频率等&#xf…

【python实现向日葵控制软件功能】手机远程控制电脑

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…

Redis数据结构——Redis简单动态字符串SDS

定义 众所周知&#xff0c;Redis是由C语言写的。 对于字符串类型的数据存储&#xff0c;Redis并没有直接使用C语言中的字符串。 而是自己构建了一个结构体&#xff0c;叫做“简单动态字符串”&#xff0c;简称SDS&#xff0c;比C语言中的字符串更加灵活。 SDS的结构体是这样的…

vue + less 实现动态主题换肤功能

文章目录 前言一、前提条件1. 初始化vue项目2. 安装插件 二、新建文件夹主题theme1.style.less文件2.model.js文件3.theme.js文件theme文件夹最终效果 三、修改vue.config.js文件四、页面上的具体使用1. index.vue 页面2. index.vue 页面注意点说明3. index.vue 效果 五、在js中…

学会这一招,轻松玩转小程序自动化

jmeter 可以做性能测试&#xff0c;这个很多人都知道&#xff0c;那你知道&#xff0c;jmeter 可以在启动运行时&#xff0c;指定线程数和运行时间&#xff0c;自定义性能场景吗&#xff1f; jmeter 性能测试&#xff0c;动态设定性能场景 平时&#xff0c;我们使用 jmeter 进…

《图解HTTP》——HTTP协议详解

一、HTTP协议概述 HTTP是一个属于应用层的面向对象协议&#xff0c;由于其简捷、快速的方式&#xff0c;适用于分布式超媒体信息系统。它于1990年提出&#xff0c;经过几年的使用与发展&#xff0c;得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版&#xff0c;HTTP…

TiDB Bot:用 Generative AI 构建企业专属的用户助手机器人

本文介绍了 PingCAP 是如何用 Generative AI 构建一个使用企业专属知识库的用户助手机器人。除了使用业界常用的基于知识库的回答方法外&#xff0c;还尝试使用模型在 few shot 方法下判断毒性。 最终&#xff0c;该机器人在用户使用后&#xff0c;点踩的比例低于 5%&#xff0…