Element Plus el-table 自定义合并行和列

这篇具有很好参考价值的文章主要介绍了Element Plus el-table 自定义合并行和列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原文链接:Element Plus el-table 自定义合并行和列

前言

目标效果是将表格行数据中某个属性值相同的项合并到一起,效果如下:

Element Plus el-table 自定义合并行和列,vue.js,elementui,javascript

<el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
    <el-table-column prop="StoAlias" label="节点名称" />
    <el-table-column prop="Name" label="存储池名称" />
    <el-table-column prop="Type" label="存储池类型" />
    <el-table-column prop="Capacity" label="总容量" />
    <el-table-column prop="Available" label="可用容量" />
    <el-table-column prop="Used" label="已使用容量" />
    <el-table-column prop="Status" label="状态" />
</el-table>
import type { TableColumnCtx } from 'element-plus'

const tableData = [
  { "Available": 0, "Capacity": 0, "Name": "test05", "Status": 0, "StoAlias": "test", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test01", "Status": 0, "StoAlias": "169.254.218", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "tset03", "Status": 0, "StoAlias": "test", "Type": 1, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test02", "Status": 0, "StoAlias": "test03", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test06", "Status": 0, "StoAlias": "test03", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test04", "Status": 0, "StoAlias": "169.254.218", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test07", "Status": 0, "StoAlias": "169.254.218", "Type": 1, "Used": 0 }
]

let cellList: any[] = [] // 单元格数组
let count: number = 0 // 计数

const computeCell = (tableList: any[]) => {
  cellList = []
  count = 0
  for (let i = 0; i < tableList.length; i++) {
    if (i === 0) {
      // 先设置第一项
      cellList.push(1); // 初为1,若下一项和此项相同,就往cellList数组中追加0
      count = 0; // 初始计数为0
    } else {
      if (tableList[i].StoAlias == tableList[i - 1].StoAlias) {
        cellList[count] += 1; // 增加计数
        cellList.push(0); // 相等就往cellList数组中追加0
      } else {
        cellList.push(1); // 不等就往cellList数组中追加1
        count = i; // 将索引赋值为计数
      }
    }
  }
}

const sortArray = (x: any, y: any) => {
  if (x.StoAlias < y.StoAlias) { return -1 }
  else if (x.StoAlias > y.StoAlias) { return 1 }
  else { return 0 }
}

interface SpanMethodProps {
  row: StoragePoolItem
  column: TableColumnCtx<StoragePoolItem>
  rowIndex: number
  columnIndex: number
}

const spanMethod = ({
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
    computeCell(tableData.sort(sortArray))
    if (columnIndex === 0) {
      const fRow = cellList[rowIndex]
      const fCol = fRow > 0 ? 1 : 0
      return {
        rowspan: fRow, // 合并的行数
        colspan: fCol // 合并的列数,为0表示不显示
      }
    }
}

sortArray()此方法根据目标属性值(StoAlias)排序了。

点击 传送门 查看更多关于【el-table 合并行或列】的信息。文章来源地址https://www.toymoban.com/news/detail-532126.html

到了这里,关于Element Plus el-table 自定义合并行和列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element ui el-table 合并单元格

      el-table v-loading=\\\"loading\\\" :data=\\\"tableData\\\" style=\\\"width: 100%\\\" highlight-current-row :span-method=\\\"arraySpanMethod\\\"         el-table-column type=\\\"index\\\" label=\\\"序号\\\" /         el-table-column v-for=\\\"item in formThead\\\" :key=\\\"item.label\\\" :label=\\\"item.label\\\" :prop=\\\"item.prop\\\" :formatter=\\\"item.formatter\\\" :width=\\\"item.width || \\\'auto\\\'\\\" /        

    2024年02月02日
    浏览(38)
  • Element Plus二次封装el-table、可编辑表格

    一、需求 在后台管理项目中,可以显而易见的见到表格组件,为了方便我们会把表格组件进行二次封装,即方便了开发,也方便了维护。 2023年04月01日更新单元格编辑功能 扩展 el-table 扩展【表格动态列展示】 整合版本,附带查询,分页,表头自定义展示,等其他功能。 注

    2024年02月07日
    浏览(50)
  • element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(43)
  • element-plus el-table 点击单行修改背景色

    element-plus + el-table 点击行选中并修改背景色+文字颜色 方法一: 重点: highlight-current-row element-plus 本身有给提供这个功能,而且比第二个方法更好用,第二个方法在有列固定的情况下,样式会不生效,所以建议直接用第一种 方法二: 重点: @row-click :row-style

    2024年02月15日
    浏览(37)
  • element-ui el-table 如何实现合并单元格

    el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。 比如:代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

    2024年02月03日
    浏览(48)
  • Element plus el-table 鼠标滚动失灵的问题及解决办法

    Bug:ElementUI el-table 鼠标滚轮下滑动失灵的情况 我测出来的这个问题条件很苛刻,需要达到以下几个条件才会触发: 1.element plus(其他版本没试) 2.el-table-column组件有fixed属性时 3.template标签中有el-button,并且el-button有size=“small”时 4.我的浏览器缩放(Ctrl+滚轮)达到110%时 会

    2024年02月13日
    浏览(43)
  • Element UI Table实现可编辑表格+校验(行和行,列和列)

    Table: TablePersonPicker: 输入校验: 效果图:    

    2024年02月15日
    浏览(36)
  • element-plus el-table、动态添加、删除行、input输入框

    模板部分,使用 el-table 元素作为表格容器,绑定 data 属性传入表格数据。用 v-for 指令遍历每一项数据,使用普通文本或 el-input 组件渲染每个单元格。表格最后一列为操作列,包含 “Add” 和 “Delete” 两个按钮,点击它们可以增加或删除数据行: 逻辑部分,定义 tableData 数据

    2024年02月06日
    浏览(44)
  • 论element-ui表格的合并行和列(巨细节)

    ​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。 效果图: 代码: 这里只展示关键代码 先看看它们是怎么完成这个的: ​ 首先,看似是合并了行、实

    2023年04月13日
    浏览(47)
  • [element-ui] el-table表格合并 span-method

    element 中表格合并 span-method 函数详解

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包