拿我的数据去一行一行调试,注释写的很清楚(每行都写了),重点是js部分,在最后面。
<el-table
class="dialog-table"
:header-cell-style="{'text-align':'left',background:'#eef1f6',color:'#606266'}"
:data="equityListData"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="text1"
label="权益分配">
</el-table-column>
<el-table-column
prop="text2"
label="">
</el-table-column>
<el-table-column
prop="platinumNumber"
label="铂金">
<template slot-scope="scope">
<span v-if="scope.$index != 3">{{ scope.row.platinumNumber }}</span>
<el-input-number v-else v-model="scope.row.platinumNumber" @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="goldLeveNumber"
label="黄金">
<template slot-scope="scope">
<span v-if="scope.$index != 3">{{ scope.row.goldLeveNumber }}</span>
<el-input-number v-else v-model="scope.row.goldLeveNumber" @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="silverNumber"
label="白金">
<template slot-scope="scope">
<span v-if="scope.$index != 3">{{ scope.row.silverNumber }}</span>
<el-input-number v-else v-model="scope.row.silverNumber" @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
</template>
</el-table-column>
</el-table>
data里面的数据
// 表格数据
equityListData: [{
text1: '企业账户各等级权益数量',
text2: '总权益数量',
platinumNumber: 0,
goldLeveNumber: 0,
silverNumber: 0,
},{
text1: '企业账户各等级权益数量',
text2: '剩余未分配权益数量',
platinumNumber: 0,
goldLeveNumber: 0,
silverNumber: 0,
},{
text1: '企业员工各等级账户人数',
text2: '企业员工各等级账户人数',
platinumNumber: 0,
goldLeveNumber: 0,
silverNumber: 0,
},{
text1: '请输入各等级账户分配权益数量',
text2: '请输入各等级账户分配权益数量',
platinumNumber: 0,
goldLeveNumber: 0,
silverNumber: 0,
},]
最后js部分,也是重点
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 2 || rowIndex === 3) { // 如果是第3行或者第4行(因为获取的是下标)
if (columnIndex === 0) { // 如果是第一列的,占满第一、二列
return [1, 2];
}else if (columnIndex === 1) { // 剩下的全部占0份
return [0, 0];
}
}else if(columnIndex === 0){ // 如果是第1列(因为获取的是下标)
if (rowIndex === 0) { // 如果是第一行,占满第一、二行,合并成一个
return {
rowspan: 2,
colspan: 1
};
} else { // 剩下的占0份
return {
rowspan: 0,
colspan: 0
};
}
}
},