vue el-table的合并单元格与拆分单元格
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const fields = ['stritemname', 'stritemstyle', 'strmadefactname', 'strpurchaseunit', 'dblquantity']
if (fields.includes(column.property)) {
const cellValue = row['lngitemid']
if (cellValue && fields.includes(column.property)) {
const prevRow = this.tableData[rowIndex - 1]
let nextRow = this.tableData[rowIndex + 1]
if (prevRow && prevRow['lngitemid'] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
// return { rowspan: row.rowspan, colspan: 1 }
let countRowspan = 1
while (nextRow && nextRow['lngitemid'] === cellValue) {
nextRow = this.tableData[++countRowspan + rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
},
}
<!-- 拆分表格 -->
<el-table
:data="tableData"
:border="true"
row-key="id"
:key="tableKey"
>
<el-table-column
fixed="left"
type="index"
:label="$t('public_label.index')"
width="70"
>
</el-table-column>
<el-table-column
v-for="(item, index) in checkeds"
:key="`col_${index}`"
:prop="tableOptions[index].value"
:label="tableOptions[index].label"
:width="tableOptions[index].value == 'backupFileName'?'490px':''"
>
<template slot-scope="scope">
<span v-if="tableOptions[index].value == 'useStatus'">
{{ scope.row.useStatus.toString().split("\n")[0] == 101 ? $t("mes_public_label.Successed") : $t("mes_public_label.Failed")}}
<el-divider direction="horizontal"></el-divider>
{{
scope.row.useStatus.toString().split("\n")[1] == '101'
? $t("mes_public_label.Successed") :
scope.row.useStatus.toString().split("\n")[1] == null ? '-' : $t("mes_public_label.Failed")}}
</span>
<span v-else-if="tableOptions[index].value == 'backupType'">
{{ scope.row.backType == 0 ? "差异备份" : "完全备份" }}
</span>
<span v-else-if="tableOptions[index].value == 'backupFileName'" width="1222px">
{{ scope.row.backupFileName.toString().split("\n")[0]}}
<el-divider direction="horizontal"></el-divider>
{{ scope.row.backupFileName.toString().split("\n")[1] == null ? '-' : scope.row.backupFileName.toString().split("\n")[1] }}
</span>
<span v-else-if="tableOptions[index].value == 'fileNumber'">
{{ scope.row.fileNumber.toString() == '' ? '-' : scope.row.fileNumber.toString().split("\n")[0] }}
<el-divider direction="horizontal"></el-divider>
{{ scope.row.fileNumber.toString() == '' ? '-' : scope.row.fileNumber.toString().split("\n")[0] }}
</span>
<span v-else-if="tableOptions[index].value == 'backupFileNumber'">
{{ scope.row.backupFileNumber.toString() == '' ? '-' : scope.row.backupFileNumber.toString().split("\n")[0] }}
<el-divider direction="horizontal"></el-divider>
{{ scope.row.backupFileNumber.toString() == '' ? '-' : scope.row.backupFileNumber.toString().split("\n")[0] }}
</span>
<span v-else-if="tableOptions[index].value == 'backupFileCapacity'">
{{ scope.row.backupFileCapacity.toString() == '' ? '-' : scope.row.backupFileCapacity.toString().split("\n")[0] }}
<el-divider direction="horizontal"></el-divider>
{{ scope.row.backupFileCapacity.toString() == '' ? '-' : scope.row.backupFileCapacity.toString().split("\n")[1] }}
</span>
<span v-else>{{ scope.row[tableOptions[index].value] }}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
:label="$t('public_label.operation')"
width="220px"
>
<template slot-scope="scope">
<!-- 删除、还原 -->
<el-dropdown
trigger="click"
style="margin-right: 22px"
v-if="
$_has('deptQuery') ||
$_has('deptEdit') ||
$_has('deptDelete') ||
$_has('deptEnable') ||
$_has('deptDisable')
"
>
<el-button type="primary">
<span>{{ $t("public_btn_name.feature") }}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item @click.native="toView(scope.row)" v-if="$_has('backupQuery')">{{$t('public_btn_name.view')}}</el-dropdown-item> -->
<el-dropdown-item
@click.native="toDeleteBack(scope.row)"
v-if="$_has('backupDelete')"
>
{{ $t("public_btn_name.delete") }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toReback(scope.row)"
v-if="$_has('backupEnable')"
>
{{ $t("mes_public_label.reback") }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>