需求：紅框內單元格的值點選可修改。如果值改變就傳送請求，沒改變就不請求

 <!--表格內容-->
      <div class="table-wrapper" ref="tableWrapper" style=" height:calc(100%-52px)">
        <el-table
          v-loading = "loadingA"
          element-loading-background = "rgba(0, 0, 0, 0.5)"
          element-loading-text = "載入中"
          :data
 
="list"
          :span-method="arraySpanMethod"
          @cell-click="tabClick"
          :row-class-name="tableRowClassName"
          height='100%'
          border
        >
          <el-table-column
            prop="modularName"
            show-overflow-tooltip
            label="模組"
            align
 
="center"
          ></el-table-column>
          <el-table-column
            prop="indexName"
            label="指標名稱"
             show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="dataSources"
 

            label="資料來源"
            align="center"
             show-overflow-tooltip
          >
          <template slot-scope="scope">              
               <span v-if='scope.row.dataSources==1'>綜能公司</span>
               <span v-else>營銷服務中心</span>
            </template> 
          </el-table-column>
          <el-table-column
            prop="statisticalCycle"
            show-overflow-tooltip
            label="統計週期"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="statisticalMonth"
            show-overflow-tooltip
            label="統計月份"
            align="center"
          >
          <template slot-scope="scope">  
            <span>{{scope.row.statisticalMonth.slice(0,7)}}</span>            
          </template >
          </el-table-column>
          <el-table-column
             prop="company"
            show-overflow-tooltip
            label="單位"
            align="center"
          ></el-table-column>
            <el-table-column
            label="寧夏"
            align="center"
            prop='citySeven'
          >
             <template slot-scope="scope">
               <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '寧夏'">
                 <el-input maxLength='32'   v-model="scope.row.citySeven" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
               </span>
                
               <span v-else>{{scope.row.citySeven}}</span>
            </template>
          </el-table-column>
             <el-table-column
            label="銀川"
            align="center"
            prop='cityOne'
          >
             <template slot-scope="scope">
               <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '銀川'">
                 <el-input maxLength='32'   v-model="scope.row.cityOne" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
               </span>
                
               <span v-else>{{scope.row.cityOne}}</span>
            </template>
          </el-table-column>
           
          <el-table-column
            show-overflow-tooltip
            label="固原"
            align="center"
            prop='cityTwo'
          >
            <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '固原'">
                  <el-input maxLength='32' v-model="scope.row.cityTwo" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span  v-else>{{scope.row.cityTwo}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="吳忠"
            align="center"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '吳忠'">
                  <el-input    maxLength='32'   v-model="scope.row.cityThree" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span  v-else>{{scope.row.cityThree}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="石嘴山"
            align="center"
          >
           <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '石嘴山'">
                  <el-input  maxLength='32'   v-model="scope.row.cityFour" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span  v-else>{{scope.row.cityFour}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="中衛"
            align="center"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '中衛'">
                  <el-input   maxLength='32'     v-model="scope.row.cityFive" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span  v-else>{{scope.row.cityFive}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="寧東"
            align="center"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '寧東'">
                  <el-input   maxLength='32'    v-model="scope.row.citySix" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span v-else>{{scope.row.citySix}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="綜能公司"
            align="center"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '綜能公司'">
                  <el-input   maxLength='32'   v-model="scope.row.citySum" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
                </span>
               <span  v-else>{{scope.row.citySum}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

  directives: {
        focus: {
            inserted: function (el) {
            el.querySelector('input').focus()
            }
       }
    },
  methods: {
   tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放進row
      row.index = rowIndex
   },
   // 新增明細原因 row 當前行 column 當前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '寧夏':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '銀川':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '固原':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '吳忠':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '石嘴山':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '中衛':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '寧東':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '綜能公司':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
    },
    //  記錄使用者點選前，該行的name值
    focusEvent (row) {
        row.oldcityOne = row.cityOne
        row.oldcitySeven = row.citySeven
        row.oldcityTwo = row.cityTwo
        row.oldcityThree = row.cityThree
        row.oldcityFour = row.cityFour
        row.oldcityFive = row.cityFive
        row.oldcitySix = row.citySix
        row.oldcitySum = row.citySum
    },

    blurEvent (row) {
      this.tabClickIndex ='' 
      this.tabClickLabel = ''
      let value,a,id
      if(row.oldcityOne!== row.cityOne){
         value=row.cityOne
         a='cityOne'
         id=row.id
         this.edit(a,value,id)
      }else if(row.oldcityTwo !== row.cityTwo ){
        value=row.cityTwo
         a='cityTwo'
         id=row.id
         this.edit(a,value,id)

      }else if(row.oldcityThree !== row.cityThree ){
        value=row.cityThree
         a='cityThree'
         id=row.id
         this.edit(a,value,id)

      }else if(row.cityFour !== row.cityFour){
        value=row.cityFour
         a='cityFour'
         id=row.id
         this.edit(a,value,id)

      }else if(row.oldcityFive !== row.cityFive ){
        value=row.cityFive
         a='cityFive'
         id=row.id
         this.edit(a,value,id)

      }else if(row.oldcitySix !== row.citySix ){
        value=row.citySix
         a='citySix'
         id=row.id
         this.edit(a,value,id)

      }else if(row.oldcitySum !== row.citySum ){
        value=row.citySum
         a='citySum'
         id=row.id
         this.edit(a,value,id)

      }else if(row.oldcitySeven !== row.citySeven ){
        value=row.citySeven
         a='citySeven'
         id=row.id
         this.edit(a,value,id)

      }

    },
    edit(a,value,id){
      // value=this.numFilter(value)
      let data={
        id:id
      }
      data[a]=value
      // 呼叫修改名稱介面
      editdata(data).then(res => {
        if(res.code==0){
           this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1000
          })
        }     
        })
    },

}