el-table合并部分成功部分不成功?
问题描述:
需要合并el-table中前4列的内容,但是第4列无法合并。
渲染代码:
<el-table :data="waterData" border :span-method="handleSpanM">
<el-table-column align="center" width="65">
<template slot-scope="scope">{{scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" width="70" label="系数">
<template slot-scope="scope">
<el-input size="mini" class="" v-model="scope.row.factor"></el-input>
</template>
</el-table-column>
<el-table-column align="center" width="120" label="等级分数">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row.grade"></el-input>
</template>
</el-table-column>
<el-table-column align="center" width="180" label="符号选择">
<template slot-scope="scope">
<div class="symbol">
<span style="display: none;">{{ scope.row.symbol }}</span>
<span class="symbol_range"></span>
</div>
</template>
</el-table-column>
<el-table-column width="120" v-for="(column,index) in 6" :key="`column-${index}`">
<template slot="header">
<div>
<el-input size="small" v-model="waterForm[`water${index + 1}_label`]">
</el-input>
</div>
</template>
<template slot-scope="scope">
<div>
<el-input size="small" v-model="waterForm[`water${index + 1}_factor`]"></el-input>
</div>
</template>
</el-table-column>
</el-table>
解决方法:
可以使用自定义的合并方法来实现特定列的合并。
// 合并方法
merge(tableData) {
this.companyArr = [];
this.companyPos = 0;
this.simpleArr = [];
this.simplePos = 0;
this.symbolArr = [];
this.symbolPos = 0;
for (var i = 0; i < tableData.length; i++) {
if (i === 0) {
// 第一行必须存在
this.companyArr.push(1);
this.companyPos = 0;
this.simpleArr.push(1);
this.simplePos = 0;
this.symbolArr.push(1);
this.symbolPos = 0;
} else {
// 第一列
if (tableData[i].name === tableData[i - 1].name) {
this.companyArr[this.companyPos] += 1;
this.companyArr.push(0);
} else {
this.companyArr.push(1);
this.companyPos = i;
}
// 第二列
if (
tableData[i].name === tableData[i - 1].name &&
tableData[i].factor === tableData[i - 1].factor
) {
this.simpleArr[this.simplePos] += 1;
this.simpleArr.push(0);
} else {
this.simpleArr.push(1);
this.simplePos = i;
}
// 第四列
if (
tableData[i].name === tableData[i - 1].name &&
tableData[i].factor === tableData[i - 1].factor &&
tableData[i].symbol === tableData[i - 1].symbol
) {
this.symbolArr[this.symbolPos] += 1;
this.symbolArr.push(0);
} else {
this.symbolArr.push(1);
this.symbolPos = i;
}
}
}
},
//合并方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 合并第一列
const _row_1 = this.companyArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1,
};
} else if (columnIndex === 1) {
// 合并第二列
const _row_2 = this.simpleArr[rowIndex];
const _col_2 = _row_2 > 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2,
};
} else if (columnIndex === 3) {
// 合并第四列
const _row_3 = this.symbolArr[rowIndex];
const _col_3 = _row_3 > 0 ? 1 : 0;
return {
rowspan: _row_3,
colspan: _col_3,
};
}
},
完整示例:
<template>
<el-table :data="waterData" border :span-method="arraySpanMethod">
<el-table-column align="center" width="65">
<template slot-scope="scope">{{scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" width="70" label="系数">
<template slot-scope="scope">
<el-input size="mini" class="" v-model="scope.row.factor"></el-input>
</template>
</el-table-column>
<el-table-column align="center" width="120" label="等级分数">
<template slot-scope="scope">
<el-input size="mini" v-model="scope.row.grade"></el-input>
</template>
</el-table-column>
<el-table-column align="center" width="180" label="符号选择">
<template slot-scope="scope">
<div class="symbol">
<span style="display: none;">{{ scope.row.symbol }}</span>
<span class="symbol_range"></span>
</div>
</template>
</el-table-column>
<el-table-column width="120" v-for="(column,index) in 6" :key="`column-${index}`">
<template slot="header">
<div>
<el-input size="small" v-model="waterForm[`water${index + 1}_label`]">
</el-input>
</div>
</template>
<template slot-scope="scope">
<div>
<el-input size="small" v-model="waterForm[`water${index + 1}_factor`]"></el-input>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData:[
{name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
{name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
{name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
{name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
{name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},
{name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},
以上就是el-table 合并前四列:为什么第四列无法合并?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论