<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="區(qū)"    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的數(shù)據(jù)    originalData: [],//table數(shù)據(jù)備份    provinceArr: [], //省份要合并數(shù)組 [2,0,1,3,0,0] 代表第一二行合并,第三行不變,第四五六行合并,0代表原本的那一行被合并,因此這個列被消除    provincePos: 0, //省份要合并數(shù)組內(nèi)容的序號    cityArr: [], //同上 市    cityPos: [],    zoneArr: [],//同上 區(qū)    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) //增加一個新的屬性       //可以修改的屬性值,進(jìn)行添加一個對應(yīng)的原本值       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) {    //取消編輯,把原本值進(jìn)行覆蓋回來    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) {     //第三列的合并方法,區(qū)     const _row_3 = this.zoneArr[rowIndex];     const _col_3 = _row_3 > 0 ? 1 : 0;     return {      rowspan: _row_3,      colspan: _col_3     }    }   },   merage() {    //要合并的數(shù)組的方法    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 {      // 判斷當(dāng)前元素與上一個元素是否相同 this.provincePos是provinceArr內(nèi)容的序號      //省      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;      }      //區(qū)      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() {    //初始化省市區(qū)的合并行的數(shù)組    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>

[ {  "province": "浙江省",  "city": "杭州市",  "zone": "余杭區(qū)",  "type": "ICBC",  "remake": "2017-2018年期間建成并網(wǎng)的分布式光伏",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.1",  "citySubsidy": "0.1" }, {  "province": "浙江省",  "city": "杭州市",  "zone": "余杭區(qū)",  "type": "DWE",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.1",  "citySubsidy": "0." }, {  "province": "浙江省",  "city": "杭州市",  "zone": "蕭山區(qū)",  "type": "DWE",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.1",  "citySubsidy": "0." }, {  "province": "安徽省",  "city": "阜陽市",  "zone": "太和縣",  "type": "ALL",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.2",  "citySubsidy": "0.1" }, {  "province": "安徽省",  "city": "合肥市",  "zone": "蜀山區(qū)",  "type": "ALL",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.2",  "citySubsidy": "0.1" }, {  "province": "安徽省",  "city": "合肥市",  "zone": "廬陽區(qū)",  "type": "ALL",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.2",  "citySubsidy": "0.1" }, {  "province": "浙江省",  "city": "杭州市",  "zone": "西湖區(qū)",  "type": "ALL",  "remake": "2017-2018年期間建成并網(wǎng)的分布式光伏",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.1",  "citySubsidy": "0.2" }, {  "province": "浙江省",  "city": "嘉興市",  "zone": "海鹽縣",  "type": "ALL",  "remake": "對居民住宅單獨建設(shè)的光伏發(fā)電項目",  "publicSubsidy": "0.37",  "provinceSubsidy": "0.2",  "citySubsidy": "0.1" }]