实操好用~~~~~antd 中 Table表格动态合并~~~
我写了两种方法
一种是前端处理数据渲染
一种是后端处理数据渲染
数据结构略有不同
下面上代码
<template>
<page-view :title="title">
<h1>第一種數據結構，前端渲染</h1>
<a-table :columns="columns" :dataSource="DataArr" bordered>
<template slot="name" slot-scope="text">
<a href="javascript:;">{{ text }}</a>
</template>
</a-table>
</page-view>
</template>
<script>
import { PageView } from '@/layouts'
export default {
// name: 'particleTest',
components: {
PageView
},
data() {
return {
renderContent: function() {},
countArr: [],
DataArr: [
{
Name: '小明',
age: '343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
oid: '1'
},
{
Name: '小明',
age: '3434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
oid: '2'
},
{
Name: '小明',
age: '34343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
oid: '3'
},
{
Name: '小明',
age: '43434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
oid: '4'
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
oid: '5'
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc1',
oid: '6'
},
{
Name: '小明222小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
oid: '7'
},
{
Name: '小明333小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
oid: '8'
}
],
columns: [
{
title: 'id',
dataIndex: 'oid',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['oid']) {
obj.attrs.rowSpan = this.countArr['oid'][index]
}
return obj
}
},
{
title: '结构名称',
dataIndex: 'Name',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['Name']) {
obj.attrs.rowSpan = this.countArr['Name'][index]
}
return obj
}
},
{
title: '屬性222',
dataIndex: 'age',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['age']) {
obj.attrs.rowSpan = this.countArr['age'][index]
}
return obj
}
},
{
title: '屬性2',
dataIndex: 'agetwo',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['agetwo']) {
obj.attrs.rowSpan = this.countArr['agetwo'][index]
}
return obj
}
},
{
title: '屬性3',
dataIndex: 'age3',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['age3']) {
obj.attrs.rowSpan = this.countArr['age3'][index]
}
return obj
}
},
{
title: '屬性4',
dataIndex: 'age4',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr['age4']) {
obj.attrs.rowSpan = this.countArr['age4'][index]
}
return obj
}
}
]
}
},
methods: {
// 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的1
conutfun(dataIndex) {
const DataArr1 =this.DataArr
var myArray = new Array(DataArr1.length) // 聲明一個數組，每個對應保存的是rowspan的值
console.log(DataArr1)
var mykeyname = '' // 保存上一個值
var count = 0 // 保存相同的值出現的次數
var startindex = 0 // 保存第一次這個值出現的位置
for (var i = 0; i < DataArr1.length; i++) {
var val = DataArr1[i][dataIndex]
if (i === 0) {
mykeyname = val
count = 1
myArray[0] = 1
} else {
if (val === mykeyname) {
count++
myArray[startindex] = count
myArray[i] = 0
} else {
count = 1
mykeyname = val
startindex = i
myArray[i] = 1
}
}
}
return myArray
},
// 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的2
// 這個函數的作用是把表格的表頭部分輸入，然後生成一個大對象，對象的key是對應的表格內容列名，數組的value對應的表格合併的列1
// Name: (8) [6, 0, 0, 0, 0, 0, 1, 1]
// age: (8) [1, 1, 1, 1, 4, 0, 0, 0]
// age3: (8) [6, 0, 0, 0, 0, 0, 2, 0]
// age4: (8) [5, 0, 0, 0, 0, 3, 0, 0]
// agetwo: (8) [8, 0, 0, 0, 0, 0, 0, 0]
// oid: (8) [1, 1, 1, 1, 1, 1, 1, 1]
countArrFun() {
var mynewarray = {}
for (var i = 0; i < this.columns.length; i++) {
const _ = this.columns[i]
const arr = this.conutfun(_.dataIndex)
mynewarray[_.dataIndex] = arr
}
console.log(mynewarray)
return mynewarray
}
// 這個函數的作用是把表格的表頭部分輸入，然後生成一個數組，數組的key是對應的表格內容列名，數組的value對應的表格合併的列2
},
mounted() {
this.countArr =this.countArrFun()
},
computed: {
title() {
return this.$route.meta.title
}
}
}
</script>
<template>
<page-view :title="title">
<h1>第二種數據結構，後端渲染</h1>
<a-table :columns="columns" :dataSource="DataArr" bordered>
<template slot="name" slot-scope="text">
<a href="javascript:;">{{ text }}</a>
</template>
</a-table>
</page-view>
</template>
<script>
import { PageView } from '@/layouts'
export default {
// name: 'particleTest',
components: {
PageView
},
data() {
return {
renderContent: function() {},
countArr: [],
DataArr: [
{
Name: '小明',
age: '343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '1',
Name_RS: 6,
age_RS: 1,
agetwo_RS: 8,
age3_RS: 6,
age4_RS: 5,
orderid_RS: 1
},
{
Name: '小明',
age: '3434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '2',
Name_RS: 0,
age_RS: 1,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 0,
orderid_RS: 1
},
{
Name: '小明',
age: '34343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '3',
Name_RS: 0,
age_RS: 1,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 0,
orderid_RS: 1
},
{
Name: '小明',
age: '43434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '4',
Name_RS: 0,
age_RS: 1,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 0,
orderid_RS: 1
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '5',
Name_RS: 0,
age_RS: 4,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 0,
orderid_RS: 1
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc1',
orderid: '6',
Name_RS: 0,
age_RS: 0,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 3,
orderid_RS: 1
},
{
Name: '小明222小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
orderid: '7',
Name_RS: 1,
age_RS: 0,
agetwo_RS: 0,
age3_RS: 2,
age4_RS: 0,
orderid_RS: 1
},
{
Name: '小明333小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
orderid: '8',
Name_RS: 1,
age_RS: 0,
agetwo_RS: 0,
age3_RS: 0,
age4_RS: 0,
orderid_RS: 1
}
],
columns: [
{
title: 'id',
dataIndex: 'orderid',
customRender: (value, row, index) => {
console.log('row', row)
console.log('index', index)
console.log('value', value)
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['orderid' + '_RS'] || 0
return obj
}
},
{
title: '结构名称',
dataIndex: 'Name',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['Name' + '_RS'] || 0
return obj
}
},
{
title: '屬性222',
dataIndex: 'age',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['age' + '_RS'] || 0
return obj
}
},
{
title: '屬性2',
dataIndex: 'agetwo',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['agetwo' + '_RS'] || 0
return obj
}
},
{
title: '屬性3',
dataIndex: 'age3',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['age3' + '_RS'] || 0
return obj
}
},
{
title: '屬性4',
dataIndex: 'age4',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row['age4' + '_RS'] || 0
return obj
}
}
]
}
},
methods: {
// 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的1
conutfun(dataIndex) {
const DataArr1 =this.DataArr
var myArray = new Array(DataArr1.length) // 聲明一個數組，每個對應保存的是rowspan的值
console.log(DataArr1)
var mykeyname = '' // 保存上一個值
var count = 0 // 保存相同的值出現的次數
var startindex = 0 // 保存第一次這個值出現的位置
for (var i = 0; i < DataArr1.length; i++) {
var val = DataArr1[i][dataIndex]
if (i === 0) {
mykeyname = val
count = 1
myArray[0] = 1
} else {
if (val === mykeyname) {
count++
myArray[startindex] = count
myArray[i] = 0
} else {
count = 1
mykeyname = val
startindex = i
myArray[i] = 1
}
}
}
return myArray
},
// 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的2
// 這個函數的作用是把表格的表頭部分輸入，然後生成一個大對象，對象的key是對應的表格內容列名，數組的value對應的表格合併的列1
// Name: (8) [6, 0, 0, 0, 0, 0, 1, 1]
// age: (8) [1, 1, 1, 1, 4, 0, 0, 0]
// age3: (8) [6, 0, 0, 0, 0, 0, 2, 0]
// age4: (8) [5, 0, 0, 0, 0, 3, 0, 0]
// agetwo: (8) [8, 0, 0, 0, 0, 0, 0, 0]
// orderid: (8) [1, 1, 1, 1, 1, 1, 1, 1]
countArrFun() {
var mynewarray = {}
for (var i = 0; i < this.columns.length; i++) {
const _ = this.columns[i]
const arr = this.conutfun(_.dataIndex)
mynewarray[_.dataIndex] = arr
}
console.log(mynewarray)
return mynewarray
}
// 這個函數的作用是把表格的表頭部分輸入，然後生成一個數組，數組的key是對應的表格內容列名，數組的value對應的表格合併的列2
},
mounted() {
this.countArr =this.countArrFun()
},
computed: {
title() {
return this.$route.meta.title
}
}
}
</script>
cong 第一种数据结构转第二种，前端的实例代码如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<p id="myobj"></p>
<script>
var DataArr = [
{
Name: '小明',
age: '343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '1'
},
{
Name: '小明',
age: '3434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '2'
},
{
Name: '小明',
age: '34343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '3'
},
{
Name: '小明',
age: '43434',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '4'
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc',
orderid: '5'
},
{
Name: '小明',
age: '4343',
agetwo: 'aa',
age3: 'bb',
age4: 'cc1',
orderid: '6'
},
{
Name: '小明222小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
orderid: '7'
},
{
Name: '小明333小明',
age: '4343',
agetwo: 'aa',
age3: 'bb1',
age4: 'cc1',
orderid: '8'
}
]
var myobj = {
Name: [6, 0, 0, 0, 0, 0, 1, 1],
age: [1, 1, 1, 1, 4, 0, 0, 0],
age3: [6, 0, 0, 0, 0, 0, 2, 0],
age4: [5, 0, 0, 0, 0, 3, 0, 0],
agetwo: [8, 0, 0, 0, 0, 0, 0, 0],
orderid: [1, 1, 1, 1, 1, 1, 1, 1]
}
DataArr.forEach((_, i) => {
console.log(i, _)
Object.keys(_).forEach((mykey, k) => {
console.log(mykey)
_[mykey+'_RS'] = myobj[mykey][i]
})
console.log(DataArr);
})
document.getElementById('myobj').innerHTML=JSON.stringify(DataArr)
</script>
</body>
</html>
后端就让他们自己写把
实操好用~~~~~antd 中 Table表格动态合并~~~的更多相关文章
- 关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- 【HTML】table表格拆分合并（colspan、rowspan）
代码演示 横向合并: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- 全程实操cdh5.14.4中集成安装kylin2.4.1与使用测试
在cdh5.14.4安装完成并排错完成的情况下,进行如下kylin安装操作: 1.实验环境 三台CentOS 7主机,IP地址 192.168.43.129 cm1 192.168.43.130 cm ...
- layui中table表格的操作列（删除，编辑）等按钮的操作
暂停和中止按钮功能 if (obj.event === 'del') { layer.confirm('确认中止么', function (index) { $.ajax({ type: " ...
- element-UI中table表格的row-click事件怎么获取一行数据的id
<el-table :data="tableData" style="width: 100%" @row-click="openDetails( ...
- element-UI中table表格的@row-click事件和@selection-change耦合了
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark&quo ...
- element-ui中 table表格hover 修改背景色
增加样式级别就行啦 .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...
- 关于 html 中 table 表格 tr,td 的高度和宽度
http://wenku.baidu.com/link?url=76BZcBS3YyA1QJwE7pCPJKERPex4uSQEQ1LI5ZkwTCtunw2cBTaLI8E71dxUhFW0CH4h ...
随机推荐
- Python3.11正式版，它来了！
转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/b055fbf2.html 你好,我是测试蔡坨坨. 就在前几天,2022年10月24日,Python3.11正式版发布了! P ...
- 驱动开发：内核层InlineHook挂钩函数
在上一章<驱动开发:内核LDE64引擎计算汇编长度>中,LyShark教大家如何通过LDE64引擎实现计算反汇编指令长度,本章将在此基础之上实现内联函数挂钩,内核中的InlineHook函 ...
- 「浙江理工大学ACM入队200题系列」问题 K: 零基础学C/C++84——奇偶ASCII值判断
本题是浙江理工大学ACM入队200题第八套中的K题 我们先来看一下这题的题面. 题面 题目描述 任意输入一个字符,判断其ASCII是否是奇数,若是,输出YES,否则,输出NO; 例如,字符A的ASCI ...
- 要写文档了，emmm，先写个文档工具吧——DocMarkdown
前言 之前想用Markdown来写框架文档,找来找去发现还是Jekyll的多,但又感觉不是很合我的需求 于是打算自己简单弄一个展示Markdown文档的网站工具,要支持多版本.多语言.导航.页内导航等 ...
- K8S之prometheus-operator监控
prometheus-operator 1. Prometheus Operator介绍 介绍文章:http://t.zoukankan.com/twobrother-p-11164391.html ...
- Aspose.Words利用Word模板导出Word文档
今天工作中遇到了导出Word文档的问题,但是在搜索Aspose.Words 导出Word文档时发现网上的方法都是有头没尾的,有的只有一小段实例,让人看着摸不着头脑.借着https://www.cnbl ...
- mindxdl--common--web_cert_utils.go
// Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common this file ...
- Devexpress中gridControl设置一列不可以编辑
gridView1.Columns["列名"].OptionsColumn.AllowEdit = false;//设置列不可以编辑 记录一下. 大家如果有问题可以 Consol ...
- JavaSE -进阶基础---反射技术
反射常见用法: Java 反射机制是在运行状态中,对于任意一个类,都能够获得这个类的所有属性和方法,对于任意一个对象都能够调用它的任意一个属性和方法.这种在运行时动态的获取信息以及动态调用对象的方法的 ...
- node学习01
1.前言 Node.js 是一个开源和跨平台的 JavaScript 运行时环境 Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核). 这使得 N ...