本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下:
效果如图

<template>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="搜索">
<el-input v-model="formInline.search" placeholder="搜索"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
border
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:span-method="arraySpanMethod"
style="width: 100%">
<el-table-column
prop="province"
label="省"
width="150">
</el-table-column>
<el-table-column
prop="city"
label="市"
width="150">
</el-table-column>
<el-table-column
prop="zone"
label="区"
width="150">
</el-table-column>
<el-table-column
prop="remake"
label="备注">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.remake"></el-input>
</template>
<span v-else>{{ scope.row.remake }}</span>
</template>
</el-table-column>
<el-table-column
prop="publicSubsidy"
sortable
label="国补"
width="150">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.publicSubsidy"></el-input>
</template>
<span v-else>{{ scope.row.publicSubsidy }}</span>
</template>
</el-table-column>
<el-table-column
prop="provinceSubsidy"
sortable
label="省补"
width="150">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.provinceSubsidy"></el-input>
</template>
<span v-else>{{ scope.row.provinceSubsidy }}</span>
</template>
</el-table-column>
<el-table-column
prop="citySubsidy"
sortable
label="市补"
width="150">
<template slot-scope="scope">
<template v-if="scope.row.edit">










