本文介绍了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"> <el-input class="edit-input" size="small" v-model="scope.row.citySubsidy"></el-input> </template> <span v-else>{{ scope.row.citySubsidy }}</span> </template> </el-table-column> <el-table-column align="center" label="Actions" width="200"> <template slot-scope="scope"> <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok </el-button> <el-button v-if="scope.row.edit" class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel </el-button> <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit"> Edit </el-button> </template> </el-table-column> </el-table> </div></template><script> import axios from 'axios' export default { name: "city", data() { return { tableData: [], //table的数据 originalData: [],//table数据备份 provinceArr: [], //省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除 provincePos: 0, //省份要合并数组内容的序号 cityArr: [], //同上 市 cityPos: [], zoneArr: [],//同上 区 zonePos: [], formInline: { //form表单 search: '' }, loading: false } }, created() { this.init() }, methods: { init() { this.loading = true; axios.get('./static/table.json') .then(res => { this.loading = false; this.tableData = res.data.map((v, index) => { this.$set(v, 'edit', false) //增加一个新的属性 //可以修改的属性值,进行添加一个对应的原本值 v.originalRemake = v.remake; v.originalPublicS = v.publicSubsidy; v.originalProvinceS = v.provinceSubsidy; v.originalCityS = v.citySubsidy; return v }) this.originalData = this.tableData; this.merage() //合并的方法 }) .catch(e => { console.log(e) }) }, cancelEdit(row) { //取消编辑,把原本值进行覆盖回来 row.remake = row.originalRemake row.publicSubsidy = row.originalPublicS row.provinceSubsidy = row.originalProvinceS row.citySubsidy = row.originalCityS row.edit = false this.$message({ message: 'The title has been restored to the original value', type: 'warning' }) }, confirmEdit(row) { row.edit = false //把新的值,覆盖原本值,以防再次修改 row.originalRemake = row.remake row.originalPublicS = row.publicSubsidy row.originalProvinceS = row.provinceSubsidy row.originalCityS = row.citySubsidy this.$message({ message: 'The title has been edited', type: 'success' }) }, arraySpanMethod({row, column, rowIndex, columnIndex}) { if (columnIndex === 0) { //第一列的合并方法,省 const _row_1 = this.provinceArr[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.cityArr[rowIndex]; const _col_2 = _row_2 > 0 ? 1 : 0; return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 2) { //第三列的合并方法,区 const _row_3 = this.zoneArr[rowIndex]; const _col_3 = _row_3 > 0 ? 1 : 0; return { rowspan: _row_3, colspan: _col_3 } } }, merage() { //要合并的数组的方法 this.merageInit(); for (var i = 0; i < this.tableData.length; i++) { if (i === 0) { //第一行必须存在 this.provinceArr.push(1); this.provincePos = 0; this.cityArr.push(1); this.cityPos = 0; this.zoneArr.push(1); this.zonePos = 0; } else { // 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号 //省 if (this.tableData[i].province === this.tableData[i - 1].province) { this.provinceArr[this.provincePos] += 1; this.provinceArr.push(0); } else { this.provinceArr.push(1); this.provincePos = i; } //市 if (this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) { this.cityArr[this.cityPos] += 1; this.cityArr.push(0); } else { this.cityArr.push(1); this.cityPos = i; } //区 if (this.tableData[i].zone === this.tableData[i - 1].zone && this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) { this.zoneArr[this.zonePos] += 1; this.zoneArr.push(0); } else { this.zoneArr.push(1); this.zonePos = i; } } } }, merageInit() { //初始化省市区的合并行的数组 this.provinceArr = []; this.provincePos = 0; this.cityArr = []; this.cityPos = 0; this.zoneArr = []; this.zonePos = 0; }, onSubmit() { const filterData = this.originalData; //每次过滤之前都要把筛选之前的tableData重置 this.tableData = filterData.filter(value => { if (this.formInline.search === value.province || this.formInline.search === value.city || this.formInline.search === value.zone) { return value; } else if (this.formInline.search === '') { return value; } else if (value.province.includes(this.formInline.search) || value.city.includes(this.formInline.search) || value.zone.includes(this.formInline.search)) { return value; } }) this.merage(); } } }</script><style scoped></style>

static文件下的table.json

[ { "province": "浙江省", "city": "杭州市", "zone": "余杭区", "type": "ICBC", "remake": "2017-2018年期间建成并网的分布式光伏", "publicSubsidy": "0.37", "provinceSubsidy": "0.1", "citySubsidy": "0.1" }, { "province": "浙江省", "city": "杭州市", "zone": "余杭区", "type": "DWE", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.1", "citySubsidy": "0." }, { "province": "浙江省", "city": "杭州市", "zone": "萧山区", "type": "DWE", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.1", "citySubsidy": "0." }, { "province": "安徽省", "city": "阜阳市", "zone": "太和县", "type": "ALL", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.2", "citySubsidy": "0.1" }, { "province": "安徽省", "city": "合肥市", "zone": "蜀山区", "type": "ALL", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.2", "citySubsidy": "0.1" }, { "province": "安徽省", "city": "合肥市", "zone": "庐阳区", "type": "ALL", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.2", "citySubsidy": "0.1" }, { "province": "浙江省", "city": "杭州市", "zone": "西湖区", "type": "ALL", "remake": "2017-2018年期间建成并网的分布式光伏", "publicSubsidy": "0.37", "provinceSubsidy": "0.1", "citySubsidy": "0.2" }, { "province": "浙江省", "city": "嘉兴市", "zone": "海盐县", "type": "ALL", "remake": "对居民住宅单独建设的光伏发电项目", "publicSubsidy": "0.37", "provinceSubsidy": "0.2", "citySubsidy": "0.1" }]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。