实操好用~~~~~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 ...
随机推荐
- Three.js中加载外部fbx格式的模型素材
index.html部分: index.js部分: Scene.js部分:
- 部署redis-cluster
1.环境准备 ☆ 每个Redis 节点采用相同的相同的Redis版本.相同的密码.硬件配置 ☆ 所有Redis服务器必须没有任何数据 #所有主从节点执行: [root@ubuntu2004 ~]#ba ...
- Transformer 结构分析
self-attetion 1. 输入 \[X = EmbeddingLookup(X) + PositionalEncoding \\ X.shape == (batch\_size, seq\_l ...
- 苹果 App Store 开始支持隐藏上架应用:只能通过链接下载
据MacRumors报道,苹果公司最近宣布,正如其开发者网站上所概述的那样,App Store现在支持只能通过直接链接才能发现的隐藏应用. 图片来自 Apple 拥有不适合公开发布的应用的开发 ...
- 20_Vue如何监测数组类型数据发生改变的？
通过上一节,我们知道了vue检测对象数据发生改变的原理 但是还有个api我们没有讲解,Vue.set(): 这个API比较适合在理解了对象检测的原理后进行讲解 案例准备 html <!-- 创建 ...
- Base64 学习
base64是什么 Base64,就是包括小写字母a-z,大写字母A-Z,数字0-9,符号"+" "/ "一共64个字符的字符集,(另加一个"=&qu ...
- Java Web中requset，session，application 的作用域及区别
三者概述 requset概述: request是表示一个请求,只要发出一个请求就会创建一个request 用处:常用于服务器间同一请求不同页面之间的参数传递,常应用于表单的控件值传递. session ...
- JavaScript入门④-万物皆对象:Object
01.Object对象 Object 是 JavaScript 的一种 数据类型,它用于存储各种键值集合和更复杂的实体,是一组数据和功能的集合.JS中几乎所有对象都是继承自Object,Array.R ...
- Qwt开发笔记（二）：Qwt基础框架介绍、折线图介绍、折线图Demo以及代码详解
前言 QWT开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,本系列旨在系统解说并 ...
- layui table 表头抖动
原本table超出页面宽度(即table有横向滚动条)的情况下,缩放页面然后再设置定时器定时更新表单,会发现数据不变的时候table头部会左右抖动 而且th td比设置的minWidth 或者cell ...