实操记录之-----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 ##虚拟机要关闭交换 ...
随机推荐
- 学习Java AES加解密字符串和文件方法，然后写个简单工具类
Reference Core Java Volume Ⅱ 10th Edition 1 对称加密 "Java密码扩展"包含了一个Cipher,它是所有密码算法的超类.通过getIn ...
- 基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索
前言 笔者认为,一个博客网站,最核心的是阅读体验. 在开发StarBlog的过程中,最耗时的恰恰也是文章的展示部分功能. 最开始还没研究出来如何很好的使用后端渲染,所以只能先用Editor.md组件做 ...
- vulnhub靶场之THALES: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:THALES: 1,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhub.com/th ...
- 小菜鸡的学习笔记---<正则表达式(1)>
正则表达式学习笔记(1) (纯新手学习笔记,大佬绕路 QAQ) 一.简介 正则表达式就是一种文本模式用来匹配一系列满足特定条件的字符串,可以对比一下数学里面的表达式,比如我们要用一个表达式表示一串数字 ...
- Git安装与常用操作
Git作为一个版本控制工具,使用前需进行下载安装:可自行到官网下载. 一.安装(windows) 1.双击下载好的文件进行安装,弹窗中点击"next" 2.默认勾选,继续点击&qu ...
- Oracle 表空间常用操作
aliases: [Oracle表空间] tags: [数据库,Oracle,Blog] summary: [Oracle表空间常用操作,包括查询.分析.扩容.删除.优化等] date: ...
- PHY驱动调试之 ---PHY设备驱动(三)
1. 前言 内核版本:linux 4.9.225,以freescale为例.(部分内容待修改和补充,不一定准确) 2. 概述 上一篇文章讲了控制器的驱动使用的是platform总线的连接方式,本节要讲 ...
- 关于linux mint新增加的鼠标样式的示例图片不能正确显示的解决办法
前言 我相信你在linux mint 做鼠标主题美化的时候一定遇到过这样的问题 没错!!! 下载的鼠标的主题的示例图片不能正确显示,当然这样虽然不影响正常的鼠标主题更换使用,但是对于我这种强迫症来说简 ...
- mybatis sql批量插入
insert into jrqf_officialcard (id, budget_unit, money_purpose, economic_type, money, func_subject_na ...
- 【大数据面试】【框架】Zookeeper作用、半数机制、命令、安装台数
〇.作用 存储和管理数据 Zookeeper=文件系统+通知机制 树形结构,每个节点被称为一个Znode(1MB) 一.半数机制 1.注意 安装奇数台(4台) 二.常用命令 ls get create ...