element 表格套输入框_element表格嵌入输入框

实现效果：

编辑：

 查看：点击平台补贴展示弹窗

   <el-table
        :data="tableData"
        border
        :header-cell-style="{background:'#D7D7D7',color:'#000'}"
        style="width: 100%"
        @row-dblclick="dbclick"
        :cell-class-name="tableCellClassName">      
        <!-- 平台端 -->
        <el-table-column
          prop="platformSubsidyPrice"
          align="center"
          label="平台补贴">
          <template slot-scope="scope">
            <!--v-if去判断双击的是不是当前单元格-->
            <el-input
             min="0"
             placeholder="填写平台补贴" 
             @change="hideInputOne(scope.row)"
             oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
             size="mini" 
             :ref="scope.row.index + ',' + scope.column.index" 
             v-model="scope.row.platformSubsidyPrice" 
             v-if="scope.row.index + ',' + scope.column.index == currentCell && statusForm == 'update' ? disabled = true : disabled = false">
          </el-input>
          <span v-else style="color:red" @click="hideVisible" >{{scope.row.platformSubsidyPrice}}</span>
          </template>
        </el-table-column>
</el-table>

方法：

      // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
      tableCellClassName({row, column, rowIndex, columnIndex}){
            row.index=rowIndex;
            column.index=columnIndex;
        },
        // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
        // 拼接后类似这样："1,0","1,1",
        dbclick(row,column) {
            this.currentCell = row.index + ',' + column.index;
            if(statusForm == 'update'){ //防止不是编辑的时候点击报错
              return
            }
            // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
            setTimeout(() => {
                // 双击后自动获得焦点
                this.$refs[row.index + ',' + column.index].focus();
            })
        },
        // 当input失去焦点的时候，隐藏input
        hideInputOne(row){
            this.formData.platformSubsidyPrice = row.platformSubsidyPrice
            this.currentCell = null;
            this.dialogplatformVisible = true;
            this.tableDatas = this.formData.platformSubsidyPriceRecords 
        },
        // 如果等于查看，子表单就展示
        hideVisible(){
          if(this.statusForm == 'create'){
            this.dialogplatformVisible = true;
          }
        },
        // 平台-关闭
        closePlatform(){
          this.dialogplatformVisible = false;
        },