实操好用~~~~~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>
后端就让他们自己写把
