关于element ui表格内 在编辑状态下显示 对应组件的方法

核心css

.tb-edit .el-input {
  display: none;
}
.tb-edit .current-row .el-input {
  display: block;
}
.tb-edit .current-row .el-input + span {
  display: none;
}


</style>

HTML内

        :summary-method="getSummaries"
        show-summary 
        :height="400"
        v-loading="listLoading"
        ref="multipleTable"
        :data="lst"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        size="small"
        class="tb-edit tableBox"
        style="overflow: auto"
        :header-cell-style="{
          background: '#F3F4F7',
          color: '#555',
          padding: '4px 0px 4px 0px',
        }"
        :cell-style="{ padding: '0px 0px' }"
        :row-style="{ height: '20px' }"
        @selection-change="handleSelectionChange"
      >

          label="单件工时"
          align="center"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.WorkHour"
              placeholder="请输入内容"
              @input="changeInput($event, scope.row)"
            ></el-input>
            <span>{{ scope.row.WorkHour }}</span>
          </template>
        </el-table-column>

效果