表格嵌入输入框

 

 

<el-table
          ref="tableFile"
          :key="tableChange"
          :header-cell-style="$store.state.TABLEHEADERSTYLE"
          :row-class-name="tableRowClassName"
          @cell-click="tabClick"
          @selection-change="handleSelectionChange"
          :data="dataList"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            :key="Math.random()"
            v-if="activeName == 'statistics' || activeName == 'student'"
            width="55"
          >
          </el-table-column>
          
          <el-table-column
            key="tuition"
            v-if="activeName == 'student'"
            show-overflow-tooltip
            prop="tuition"
            align="left"
            label="学费"
          >
          <template #header>
            <span>学费</span>
            <el-button :disabled="multipleSelection.length == 0" @click="batchSetVis = true" style="width:25px; margin-left:15px;" type="text">批量设置</el-button>
          </template>
            <template slot-scope="scope">
              <span
                class="changeInfo"
                v-if="
                  scope.row.index === tabClickIndex && tabClickLabel === '学费'
                "
              >
                <el-input
                  v-model="scope.row.tuition"
                  maxlength="300"
                  placeholder="请输入学费"
                />
                <el-button
                  class="confirm"
                  @click="inputBlur(scope.row)"
                  type="text"
                  >确定</el-button
                >
                <el-button class="cancel" @click="inputCancelBlur" type="text"
                  >取消</el-button
                >
              </span>
              <el-button type="text" v-else>{{ scope.row.tuition }}</el-button>
            </template>
          </el-table-column>
          
        </el-table>

// 添加明细原因 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '学费':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default:
          return
      }
    },
    // 失去焦点初始化
    inputBlur(row) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
    inputCancelBlur() {
      this.tabClickIndex = null
      this.tabClickLabel = ''
      this.getData
    },