实操好用~~~~~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 ...
随机推荐
- 创建外部表步骤及解决ORA-29913:执行ODCIETTABLEOPEN调出时出错
创建外部表步骤 建立目录对象(用sys用户创建.授权) 外部表所在路径一定要写对!!! create directory ext_data as 'D:\ORACLE'; grant read,wri ...
- Springboot数据库的配置问题
mysql时区问题 先前的代码如下 spring: datasource: url: jdbc:mysql://localhost:3306/test username: root password: ...
- 还在用双层for循环吗？太慢了
前情提要 我们在开发中经常碰到这样的场景,查出两个 list 集合数据,需要根据他们相同的某个属性为连接点,进行聚合.但是平时我们使用的时候关注过性能吗?下面让我们一起来看看它的表现如何. 来个例子 ...
- 7.Vue常用属性
1. data:数据属性 在之前的学习中我们已经了解到了data,属性中存放的就是js变量 <script> new Vue({ el: '#app', // data data: { u ...
- Codeforces Round #809 (Div. 2)C.Qpwoeirut And The City
题目大意: 当一栋楼比旁边两栋楼都高的时候,这栋楼为cool,对除了1和n以外的所有楼可以增加任意层,问在满足使最多的楼cool的前提下的花费最小. 当n为奇数的情况下: cool的楼实际上是固定的, ...
- 本地文件上传Gitee
0.对于小白来说,我再细讲一下 一.下载git 下载细节参考博客 二.Git配置 点击桌面的图标,进入Git Bash Here 1.配置自己的用户名和邮箱 git config --global u ...
- [CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: Higher Order Functions
[CS61A] Lecture 5&6&7. Environments & Design & Functions Examples & Homework 2: ...
- Flask（一）
pip install flask 依赖wsgi flask框架是基于werkzegu的wsgi实现,flask没有自己的wsgi 用户一旦请求,就会调用app.__call__方法 flask 路由 ...
- Go语言核心36讲48
你真的很棒,已经跟着我一起从最开始初识Go语言,一步一步地走到了这里. 在这之前的几十篇文章中,我向你一点一点地介绍了很多Go语言的核心知识,以及一些最最基础的标准库代码包.我想,你已经完全有能力独立 ...
- 图文并茂解释开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别
世界上的开源许可证(Open Source License)大概有上百种,而我们常用的开源软件协议大致有GPL.BSD.MIT.Mozilla.Apache和LGPL. 从下图中可以看出几种开源软件协 ...