element-ui表格点击出现编辑效果实现

<template>
　　<div @mousedown="editCtrl(currentEditRow, ‘‘)"
　　　　　　<el-table :data="dataSet1" 
　　　　　　border 
　　　　　　size="mini" 
　　　　　　:summary-method="getSummaries" 
　　　　　　show-summary 
　　　　　　style="width: 100%; margin-top: 20px"
           highlight-current-row
          >
            <el-table-column prop="sharePremRate" label="表格单击效果">
              <template #default="scope">
                <div @mousedown.stop>
                  <el-input
                    size="mini"
                    type="number"
                     @input="inputRegTest(scope, ‘sharePremRate‘)"
                    @keydown.13.native="editCtrl(scope.row, ‘‘,‘dataSet1‘)"
                    v-model="scope.row.sharePremRate"
                    v-if="scope.row.isEdit==‘sharePremRate‘"
                  ></el-input>
                  <div
                    style="width: 100%"
                    v-else
                    @mousedown="editCtrl(scope.row, ‘sharePremRate‘,‘dataSet1‘)"
                  >
                    {{ scope.row.sharePremRate | persentSign }}%
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
　　</div>
</template>

data(){
　　return{
　　　　dataSet1:[],
　　　　dataSet2:[],
　　　　dataSet3:[],
　　　　dataSet4:[],
　　　　dataSet5:[],
　　　　dataSet6:[],
　　　　dataSet7:[],
　　　　currentEditRow: {},
　　}
},
methods:{
//单击编辑效果
editCtrl(row, filedNmae,data) {
　　　 this.currentEditRow.isEdit=‘‘
      this.currentEditRow = row;
      row.isEdit = filedNmae;
//这里要强制刷新所有el-tabel组件
    for(let i=1;i<=7;i++){
      this[`dataSet1${i}`]=[...this[`dataSet1${i}`]]
      }
    },
}