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"
  }
]