实操好用~~~~~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 ...
随机推荐
- 7.httprunner-pytest风格用例
用例设计原则 py文件名以test_开头或者_test结尾 函数名以test_开头 类名以Test开头,并且不能有init初始化方法 所有的包pakege必须有_init_.py文件 pychar ...
- HTML元素大全(2)-表单
01.<form>表单 <form> 表单是比较重要的HTML元素,块元素,主要作用是向服务端提交数据.结合表单元素input使用,通过内部的button按钮提交(type=& ...
- RAID5部署
软RAID与备份盘 1.此处我们还用刚才的4块盘做演示,三块盘做raid,一块盘做备份盘,防止磁盘故障 我们以raid 5 来配置三块磁盘 加上一块备份盘 [root@local-pyyu tmp]# ...
- Elasticsearch Analyzer 内置分词器
Elasticsearch Analyzer 内置分词器 篇主要介绍一下 Elasticsearch中 Analyzer 分词器的构成 和一些Es中内置的分词器 以及如何使用它们 前置知识 es 提供 ...
- Go语言正/反向代理的姿势
先重温一下什么叫反向代理,正向代理. 鹅厂二面,nginx回忆录 所谓正向,反向代理取决于代理的是出站请求,还是入站请求. 正向代理: 代理的出站请求, 客户端能感知到代理程序,架构上距离客户端更近. ...
- EventBridge助力阿里云视觉智能开放平台AI智能存储实践
本文作者:李建,阿里巴巴达摩院技术专家. 01 视觉智能开放平台(VIAPI)业务场景介绍 阿里云视觉智能开放平台(简称 VIAPI),是基于之前很多技术实践经验积累的 AI 能力的沉淀平台.目前整个 ...
- 用 vue3 中的 reduce（累加器） 随机生成100个字母，放入数组中，统计每个字母出现的次数
一.首先不用 reduce() 来实现 代码如下: <template lang=""> <div> <h1>统计每个字母出现的次数,不使用r ...
- EasyCode全自动单表增删改查！
需要IDEA下载EasyCode插件 准备好三个基础Base类 分页封装基础 package com.gton.io; import lombok.AllArgsConstructor; import ...
- Go 每日一库之 go-carbon，优雅的golang日期时间处理库
Carbon 是一个轻量级.语义化.对开发者友好的 golang 时间处理库,支持链式调用. Carbon 已被 awesome-go 收录, 如果您觉得不错,请给个 star 吧. github.c ...
- L1-064 估值一亿的AI核心代码 (20分)
L1-064 估值一亿的AI核心代码 (20分) 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除 ...