实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并
前几天搞了个简易版的动态合并单元格
但是需求有变化，就只能稍微改改了~~
欢迎路过的各位大佬指出我代码的问题~~~~
另： 代码执行效率不是很高，如果需要大量渲染更多数据建议可以直接使用原生
<template>
<page-view :title="title">
<h1>第一種數據結構，前端渲染</h1>
<div class="snall-table-spacing">
<a-table
:columns="columns"
:dataSource="dataArr"
row-key="id"
:scroll="{x:5900, y: 500 }"
bordered
:pagination="false"
>
<template slot="name" slot-scope="text">
<a href="javascript:;">{{ text }}</a>
</template>
</a-table>
</div>
</page-view>
</template>
<script>
import { PageView } from '@/layouts'
export default {
// name: 'paaaaaaaTest',
components: {
PageView
},
data() {
return {
renderContent: function() {},
countArr: [],
dataArr: [
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'paaaaaaa',
um: '0.3um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'paaaaaaa',
um: '0.5um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'paaaaaaa',
um: '1.0um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'paaaaaaa',
um: '5.0um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'tttttttt',
um: '',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'dddd',
paaaaaaa: 'hehehehehe',
um: '',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'paaaaaaa',
um: '0.3um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'paaaaaaa',
um: '0.5um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'paaaaaaa',
um: '1.0um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'paaaaaaa',
um: '5.0um',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'tttttttt',
um: '',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
},
{
date: '2020/03/20',
myaaaaaa: 'aaaaaaaaa',
floor: 'bbbbb',
myleeeeeee: 'cccccc',
ssssttt: 'wwwwwww',
paaaaaaa: 'hehehehehe',
um: '',
lsl: '3000',
usl: '4000',
l_0: '27400',
l_1: '27420',
l_2: '2742300',
l_3: '27r400',
l_4: '27df400',
l_5: '274f00',
l_6: '274400',
l_7: '27400',
l_8: '273400',
l_9: '27rt400',
l_10: '27er400',
l_11: '27400',
l_12: '2765400',
l_13: '2745400',
l_14: '27400',
l_15: '27400',
l_16: '27400',
l_17: '27400',
l_18: '27400',
l_19: '274500',
l_20: '274400',
l_21: '274400',
l_22: '275400',
l_23: '274600',
l_24: '27400',
l_25: '274500',
l_26: '274500',
l_27: '274500',
l_28: '274500',
l_29: '275400',
l_30: '274500',
l_31: '274500',
l_32: '274500',
l_33: '274500',
l_34: '274400',
l_35: '275400',
l_36: '2744500',
l_37: '27400',
l_38: '27456400',
l_39: '276546400',
l_40: '27400',
l_41: '27400',
l_42: '27400',
l_43: '27400',
l_44: '2740540',
l_45: '275400',
l_46: '2754040',
l_47: '274500',
l_48: '274400'
}
],
columns: []
}
},
methods: {
// 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的1
conutfun(dataIndex) {
var 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
}
}
}
// console.log(myArray)
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
setColumns() {
// 聲明一個對象，key是表格的標題，value 是表格每列的寬度
var myObj = {
date: 200,
myaaaaaa: 100,
floor: 100,
myleeeeeee: 100,
ssssttt: 100,
paaaaaaa: 100,
um: 100,
lsl: 100,
usl: 100,
l_0: 100,
l_1: 100,
l_2: 100,
l_3: 100,
l_4: 100,
l_5: 100,
l_6: 100,
l_7: 100,
l_8: 100,
l_9: 100,
l_10: 100,
l_11: 100,
l_12: 100,
l_13: 100,
l_14: 100,
l_15: 100,
l_16: 100,
l_17: 100,
l_18: 100,
l_19: 100,
l_20: 100,
l_21: 100,
l_22: 100,
l_23: 100,
l_24: 100,
l_25: 100,
l_26: 100,
l_27: 100,
l_28: 100,
l_29: 100,
l_30: 100,
l_31: 100,
l_32: 100,
l_33: 100,
l_34: 100,
l_35: 100,
l_36: 100,
l_37: 100,
l_38: 100,
l_39: 100,
l_40: 100,
l_41: 100,
l_42: 100,
l_43: 100,
l_44: 100,
l_45: 100,
l_46: 100,
l_47: 100,
l_48: 100
}
// 聲明一個新的數組，用來放新生成的colums
var newarr = []
Object.keys(myObj).forEach((_, i) => {
// 如果表格標題不是這幾個字段的話，就設置不用合併單元格，正常
if (['date', 'myaaaaaa', 'floor', 'myleeeeeee', 'ssssttt', 'paaaaaaa', 'um'].indexOf(_) < 0) {
newarr.push({
title: _,
dataIndex: _,
width: myObj[_],
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr[_]) {
obj.attrs.rowSpan = 1
}
return obj
}
})
} else if (_ === 'paaaaaaa') {
// 如果表格標題是paaaaaaa的話，就設置如果內容是hehehehehe或者tttttttt向右合併，
// 並且如果有重複字段的話，向下合併
newarr.push({
title: _,
dataIndex: _,
width: myObj[_],
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr[_]) {
obj.attrs.rowSpan = this.countArr[_][index]
}
// 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容
if (['hehehehehe', 'tttttttt'].indexOf(value) !== -1) {
obj.attrs.colSpan = 2
}
// 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容
return obj
}
})
} else if (_ === 'um') {
// 如果表格標題是um的話，就設置如果內容為空，就向右合併為0需要配合上一個，
// 並且如果有重複字段的話，向下合併
newarr.push({
title: _,
dataIndex: _,
width: myObj[_],
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr[_]) {
obj.attrs.rowSpan = this.countArr[_][index]
}
// 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容
if (!value) {
obj.attrs.colSpan = 0
}
// 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容
return obj
}
})
} else {
// 並且如果有重複字段的話，向下合併
newarr.push({
title: _,
dataIndex: _,
width: myObj[_],
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
if (this.countArr[_]) {
// 向下合併
obj.attrs.rowSpan = this.countArr[_][index]
}
return obj
}
})
}
})
this.columns = newarr
}
},
mounted() {
this.setColumns()
this.countArr = this.countArrFun()
},
computed: {
title() {
return this.$route.meta.title
}
}
}
</script>
<style lang="less" scoped>
@import url('./common-assets/index.less');
</style>
实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并的更多相关文章
- ant design for vue 解决 vue.esm.js?c5de:628 [Vue warn]: Invalid prop: custom validator check failed for prop "defaultValue". 的错误
错误重现: 在使用ant design for vue 的选择器插件的时候, 设置默认为为id(为数字) 报错: 解决办法: id为数字, 而defaultValue 的key 值必须为字符串, 将i ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架基础】
全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...
- ant design Table合并单元格合并单元格怎么用？
1.ant design table合并单元格怎么用?
- vue中 表头th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...
- vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- Ant design在vue，react的引入
文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...
- SFUD+FAL+EasyFlash典型场景需求分析，并记一次实操记录
SFUD+FAL+EasyFlash典型场景需求分析:用整个flash存储数据,上千条数据,读取得时候用easyflash很慢,估计要检索整个flash太慢了. 改进方法:分区检索. 1存数据时,根据 ...
- react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- k8s搭建实操记录一(master)
#1)关闭CentOS7自带的防火墙服务 systemctl disable firewalld systemctl stop firewalld swapoff -a ##虚拟机要关闭交换 ...
随机推荐
- 第一阶段：linux运维基础·1
1. 服务器的主要硬件是?以及其作用是? cpu 相当于人体的大脑,负责计算机的运算和控制 内存 解决cpu与硬盘之间速度不匹配的问题 磁盘 永久存放数据的存储器 主板 直接或间接的将所有的设备连接在 ...
- GlusterFS常用维护操作命令
GlusterFS常用维护操作命令 1.启动/关闭/查看glusterd服务 # /etc/init.d/glusterd start # /etc/init.d/glusterd stop # /e ...
- G1 垃圾收集器深入剖析(图文超详解)
G1(Garbage First)垃圾收集器是目前垃圾回收技术最前沿的成果之一. G1 同 CMS 垃圾回收器一样,关注最小时延的垃圾回收器,适合大尺寸堆内存的垃圾收集.但是,G1 最大的特点是引入分 ...
- 【Java复健指南09】项目练习全解--房屋出租系统
一个基于文本界面的综合练习,主要用于串联和回忆知识点,比较简单 各个界面的设计样式 主菜单 =============房屋出租系统菜单============ 1 新 增 房 源 2 查 找 房 屋 ...
- Substring 在BCL和CLR里面搞了啥
楔子 还是做点事情,不要那么散漫. 本文以简单的Substring(int startindex,int Length)函数为例,来递进下它在托管和非托管的一些行为. 以下均为个人理解,如有疏漏请指正 ...
- Golang 实现时间戳和时间的转化
何为时间戳: 时间戳是使用数字签名技术产生的数据,签名的对象包括了原始文件信息.签名参数.签名时间等信息.时间戳系统用来产生和管理时间戳,对签名对象进行数字签名产生时间戳,以证明原始文件在签名时间之前 ...
- SpringCloud(十) - Docker
1.Docker安装 1.1 卸载旧版本(否者会安装出错) sudo yum remove docker \ docker-client \ docker-client-latest \ docker ...
- Vue 基础学习总结
介绍 Vue.js 中文文档地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什么 Vue (读音 /vjuː/, ...
- winform datagridview行头添加序号
1.使用datagirdview的RowPostPaint事件 2.datagirdview命名为dgv.(当然这个名字随意,开心就好) 3.贴代码 private void dgv_RowPostP ...
- 数据结构初阶--顺序表（讲解+C++类模板实现）
顺序的概念与结构 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构,一般情况下采用数组存储.在数组上完成数据的增删查改. 一般分为两种:静态顺序表和动态顺序表 静态顺序表 #define ...