? <el-table v-loading="loading" :data="tableData" style="width: 100%" highlight-current-row :span-method="arraySpanMethod">

? ? ? ? <el-table-column type="index" label="序號" />

? ? ? ? <el-table-column v-for="item in formThead" :key="item.label" :label="item.label" :prop="item.prop" :formatter="item.formatter" :width="item.width || 'auto'" />

? ? ? ? ? </template>

? ? ? ? </el-table-column>

? ? ? </el-table>

? watch: {

? ? tableData: {

? ? ? handler(newVal) {

? ? ? ? this.tableColumns = newVal

? ? ? ? this.rowspan()

? ? ? },

? ? ? deep: true

? ? }

? },

data(){

?mergeObj: {},

? ? ? mergeRecording: [], // 合并記錄 存放需要合并列的每行對應(yīng)的合并數(shù) [[當(dāng)前行對應(yīng)的合并數(shù), 當(dāng)前行對應(yīng)的合并數(shù), ...], ...]

? ? ? mergeArr: [

? ? ? ? 'instrumentCode',

? ? ? ? 'instrumentName',

? ? ? ? 'checkQuantity',

? ? ? ?.......?formThead的prop

? ? ? ]

}

? // 合并邏輯

? ? rowspan() {

? ? ? for (let i = 0; i < this.mergeArr.length; i++) {

? ? ? ? const key = this.mergeArr[i]

? ? ? ? this.mergeObj[key] = [] // 記錄合并數(shù)組

? ? ? ? this.mergeRecording[i] = [] // 記錄本列合并的開頭索引值

? ? ? ? let count = 0 // 合并數(shù)組對應(yīng)索引

? ? ? ? this.tableData.forEach((item, index) => {

? ? ? ? ? // 當(dāng)前為第一行的時候

? ? ? ? ? if (index === 0) {

? ? ? ? ? ? this.mergeObj[key].push(1)

? ? ? ? ? ? this.mergeRecording[i].push(index)

? ? ? ? ? } else {

? ? ? ? ? ? let lastState = false

? ? ? ? ? ? // 跳過表格第一列(序號)，真實(shí)列從定義需要合并的列為基準(zhǔn)

? ? ? ? ? ? if (i === 0) {

? ? ? ? ? ? ? lastState = true

? ? ? ? ? ? } else

? ? ? ? ? ? // 判斷左列上下單元是否合并，適用場景為連續(xù)的合并

? ? ? ? ? ? if (this.mergeRecording[i - 1][index] === this.mergeRecording[i - 1][index - 1]) {

? ? ? ? ? ? ? lastState = true

? ? ? ? ? ? }

? ? ? ? ? ? // 如果說當(dāng)前行與上一行是相同的數(shù)據(jù)

? ? ? ? ? ? if (item[key] === this.tableData[index - 1][key] && lastState) {

? ? ? ? ? ? ? this.mergeObj[key][count] += 1 // 上一行的合并數(shù)+1

? ? ? ? ? ? ? this.mergeObj[key].push(0) // 當(dāng)前行的合并數(shù)是0

? ? ? ? ? ? ? this.mergeRecording[i].push(count) // 本單元格的合并的開頭索引值

? ? ? ? ? ? } else {

? ? ? ? ? ? ? // 如果說當(dāng)前行與上一行不相同 ?那么兩個都不進(jìn)行合并所以返回1，索引變成當(dāng)前行索引

? ? ? ? ? ? ? this.mergeObj[key].push(1)

? ? ? ? ? ? ? count = index

? ? ? ? ? ? ? this.mergeRecording[i].push(count) // 賦值合并的開頭索引值

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? })

? ? ? ? // console.log(this.mergeRecording[i])

? ? ? }

? ? },

? ? // 合并方法

? ? arraySpanMethod({ row, column, rowIndex, columnIndex }) {

? ? ? if (this.mergeArr.indexOf(column.property) !== -1) {

? ? ? ? if (this.mergeObj[column.property][rowIndex]) {

? ? ? ? ? return [this.mergeObj[column.property][rowIndex], 1]

? ? ? ? } else {

? ? ? ? ? return [0, 0]

? ? ? ? }

? ? ? } else {

? ? ? ? return [1, 1]

? ? ? }

? ? }文章來源地址http://www.zghlxwxcb.cn/news/detail-784760.html

到了這里，關(guān)于Element ui el-table 合并單元格的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！