实操记录之-----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 ##虚拟机要关闭交换 ...
随机推荐
- GIT入门与Gitee的使用
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 工作原理 / 流程: Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remo ...
- OpenMP 教程（一） 深入人剖析 OpenMP reduction 子句
OpenMP 教程(一) 深入人剖析 OpenMP reduction 子句 前言 在前面的教程OpenMP入门当中我们简要介绍了 OpenMP 的一些基础的使用方法,在本篇文章当中我们将从一些基础的 ...
- WPF之lognet4的基本使用
log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文介绍lognet4的基本使用. 第一步:新 ...
- Kubernetes_从零开始搭建k8s集群（亲测可用）
一.前言 本文讲述从零开始搭建k8s集群,均使用国内镜像,版本均统一,使用两个虚拟机,一个主节点,一个从节点,保证k8s一次搭建成功. 注意:Kubernetes,简称K8s,是用8代替名字中间的8个 ...
- linux内核中的likely与unlikely
前言 内核版本:linux 4.9.x.在linux内核中,经常可以看见if( likely(x))或if( unlikely(x))的语句,本文将基于likely和unlikely的定义和作用进行一 ...
- Guess Next Session
打开又是一个输入框的界面,点一下下面的看源码 很简短的一个源码 大概意思是如果password等于session[password]就输出flag 直接搜了下session函数的漏洞,发现sessio ...
- 【每日一题】【链表&头插法&ASCII码】【链表&迭代器】2022年1月28日-NC1 大数加法
描述以字符串的形式读入两个数字,编写一个函数计算它们的和,以字符串形式返回. 思路:原生链表&头插法节点值 import java.util.*; public class Solution ...
- <二>线程间互斥-mutex互斥锁和lock_guard
多线程程序 竞态条件:多线程程序执行的结果是一致的,不会随着CPU对线程不同的调用顺序而产生不同的运行结果. 解决?:互斥锁 mutex 经典的卖票问题,三个线程卖100张票 代码1 #include ...
- Go 快速入门指南 - 序言
这本书是写什么的? 这是一本 Go 语言快速入门手册,目标读者是有任一编程语言基础,希望以最快的时间 (比如一个周末) 入门 Go 语言. 这本书应该怎么读? 书中几乎没有较长篇幅的理论知识,更多的是 ...
- 解决SpringMVC重定向参数无法携带问题
解决SpringMVC重定向参数无法携带问题 场景 重定向时请求参数会丢失,我们往往需要重新携带请求参数,我们可以进⾏⼿动参数拼接如下: return "redirect:handle01? ...