[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}`]]
      }
    },
}

 

 

 

 

 

   <template>     

<div v-loading='loading' class="app-container pb50" @mousedown="showEditTable(false)">

  <el-table-column label="表格单元" prop="alloSi" align="center">
       <template #default="{ row }">
            <div @mousedown.stop>
                <el-input @blur='dsSumInsuredAfterChange(dsSumInsured)' v-if="row.ALLOSI_HIDDEN" size="mini" type='number' v-model.number="row.alloSi" />
                <div v-else @mousedown="showEditTable(true,row,'ALLOSI_HIDDEN')"> {{ row.alloSi | comdifyFormat }}</div>
            </div>
       </template>
 </el-table-column>

 </div>

 </template>

 

 

        //单击触发编辑表格
        showEditTable(boolean, row, cell) {
            //判断什么状态可以编辑
            if (!this.isShow('create')) return

            if (boolean) {
                //取消之前的编辑状态
                if (this.enableEdit.cell) {
                    this.enableEdit.row[this.enableEdit.cell] = false
                }
                //激活编辑状态
                this.enableEdit.row = row
                this.enableEdit.cell = cell
                row[cell] = true
            } else {
                //取消之前的编辑状态
                this.enableEdit.row[this.enableEdit.cell] = false
            }
            this.$forceUpdate()
        },