vue，element-ui表格，多个单元格值可修改(点击聚焦后变成input，失去焦点请求保存)

需求：红框内单元格的值点击可修改。如果值改变就发送请求，没改变就不请求

 

 <!--表格内容-->
      <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
          })
        }     
        })
    },

   //保留2位小数

     numFilter(value) {

      const realVal = parseFloat(value).toFixed(2);

      return realVal;

    }

}