实操好用~~~~~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 ...
随机推荐
- 21.drf视图系统组成及继承关系
APIView REST framework提供了一个 APIView 类,它是Django的 View 类的子类. APIView 类和Django原生的类视图的 View 类有以下不同: 传入的请 ...
- nrf9160开机测试（做主控）——连接nrfcloud云
由于作者水平有限,如有披漏欢迎指正. 测试流程: 1.前期开发准备(硬件) 2.开发环境准备(软件) 3.连接云 4.GPS测试 一.前期开发准备: nrf9160-DK版 nRF Connect f ...
- DQL-模糊查询
DQL-模糊查询 模糊查询即模糊检索,是指搜索系统自动按照用户输入关键词的同义词进行模糊检索,从而得出较多的检索结果.与之相反的是"精准搜索".模糊检索也可以说是同义词检索,这里的 ...
- cameralink base 接口双通道任意图像数据源模拟
设备说明 PCIe-CLS2000是基于PCIe 接口的2通道 camera link base接口图像模拟源,适用于图像数据源模拟.接收处理平台测试等场景. PCIe Gen2x4/x8 接口,支持 ...
- scrapy 如何使用代理 以及设置超时时间
使用代理 1. 单文件spider局部使用代理 entry = 'http://xxxxx:xxxxx@http-pro.abuyun.com:xxx'.format("帐号", ...
- VBA---文件操作
Text文件操作 Workbooks.OpenText() 载入一个文本文档,并将其作为包含单个工作表的新工作簿进行分列处理. 语法: 表达式.OpenText(Filename,StartRow, ...
- JUC学习笔记——共享模型之管程
JUC学习笔记--共享模型之管程 在本系列内容中我们会对JUC做一个系统的学习,本片将会介绍JUC的管程部分 我们会分为以下几部分进行介绍: 共享问题 共享问题解决方案 线程安全分析 Monitor ...
- Feign 实现 GET 方法传递 POJO
Feign 实现 GET 方法传递 POJO 作者:Grey 原文地址: 博客园:Feign 实现 GET 方法传递 POJO CSDN:Feign 实现 GET 方法传递 POJO 需求 Sprin ...
- ARMv8之memory model和Observability(四)
最近在学习整理ARMv8的memory 相关知识,对memory的各种概念搞的头痛,太难读了!!有幸看看窝窝大神整理了部分知识,关键是讲解的地道,透彻.因此在这里学习并转载一下,也希望能够和大家一起探 ...
- Training: MySQL I
原题链接:http://www.wechall.net/challenge/training/mysql/auth_bypass1/index.php 题目告诉我们这是一个经典的mysql注入挑战,我 ...