实操记录之-----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 ##虚拟机要关闭交换 ...
随机推荐
- Seata 环境搭建
在使用微服务中,单体事务注解@Transactional 就不适用了,需要采用分布式事务解决方案,本文介绍分布式事务Seata的安装.Seata一款开源的分布式事务解决方案,致力于在微服务架构下提供高 ...
- Spring知识框架
- 在Rocky8中安装VMware Workstation 的方法
在Rocky8中安装VMware Workstation 的方法 1.Rocky必须是图形界面 2.下载wmware workstation(下载地址:https://www.vmware.com/i ...
- 如何在 Inno Setup 中关联多种文件格式
问题描述 Inno Setup 是一款十分强大的 Windows 安装程序制作软件,可以通过编写并编译 iss 脚本来创建安装包.之前都是直接将 Pyinstaller 生成的文件夹压缩为 zip 格 ...
- 「浙江理工大学ACM入队200题系列」问题 H: 零基础学C/C++18——三位数反转
本题是浙江理工大学ACM入队200题第二套中的H题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...
- Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建 组件库的开发环境. 1 packages 目录 前面在项目根目录下创建了 ...
- Scala- Cannot run program "powershell.exe": CreateProcess error=5, 拒绝访问
安装scala后,按照官网的helloworld教程学习执行 sbt new scala/hello-world.g8 的时候,出现下图错误. 解决方案:关闭360
- day01-计算机的本质
计算机的本质 计算机又称为"电脑": 通电的大脑 意味着我们人类希望计算机通电之后可以跟人脑一样思考问题.解决问题 计算机存储数据的本质 计算机是基于电工作,而电信号只有高低电平两 ...
- Training: Encodings I
原题链接:http://www.wechall.net/challenge/training/encodings1/index.php 根据题目信息貌似是让我们用这个JPK来解码,我们先点击JPK去下 ...
- 包管理器pacman常用方法
详见[pacman(简体中文) - ArchWiki]:https://wiki.archlinux.org/title/Pacman_(简体中文) 更新系统: pacman -Syu 对整个系统进行 ...