element table表格点击单元格实现编辑+表格高度自适应

<template>
          <el-table
               :data="tableData"
               :row-class-name="tableRowClassName"
               border
               style="width: 100%"
               :max-height="tableConfig.height"
               @cell-click="tabClick">
               <el-table-column
                  v-for="item in columnData"
                  :key="item.id"
                  :prop="item.key"
                  :label="item.value"
                  class-name="column-bg-color-editable"
                  sortable
                  header-align="center">
                  <template v-if="item.isDropDown&&item.key == 'groupId'" v-slot="scope">
                        <el-select v-model="scope.row[item.key]" v-if="scope.row.index == tabClickIndex && tabClickLabel == item.value"  @change="saveInput(scope.row)">
                           <el-option v-for="item in userGroupList" 
                              :key="item.id" :label="item.name" 
                              :value="item.id">
                           </el-option>
                        </el-select>
                        <span v-else>{{ getLabelGroup(scope.row[item.key]) }}</span>
                  </template>
                  <template v-else-if="item.key == 'logDate'" v-slot="scope">
                        <el-date-picker
                           v-model="scope.row[item.key]"
                           @change="saveInput(scope.row)" // 修改后执行的方法，根据需要使用
                           v-if="scope.row.index == tabClickIndex && tabClickLabel == item.value"
                           type="date"
                           value-format="yyyy-MM-dd"
                           style="width:100%;"
                           placeholder="选择日期">
                        </el-date-picker>
                        <span v-else>{{ scope.row[item.key] }}</span>
                  </template>
                  <template v-else v-slot="scope">
                     <span v-if="scope.row.index == tabClickIndex && tabClickLabel == item.value">
                        <el-input v-model="scope.row[item.key]" 
                           maxlength="300" 
                           @change="saveInput(scope.row)" 
                           :placeholder='"请输入"+item.value' 
                           size="mini" 
                           @blur="handleInputBlur"/>
                     </span>
                     <span v-else>{{ scope.row[item.key] }}</span>
                  </template>
               </el-table-column>
               <el-table-column
                  fixed="right"
                  label="操作"
                  align="center"
                  header-align="center"
                  min-width="100">
                  <template v-slot="{ row }">
                     <el-button type="text" :disabled="row.logStatus=='1'" @click="delEvent(row)">删除</el-button>
                     <el-button type="text" :disabled="row.logStatus=='1'" @click="saveEvent(row)">提交</el-button>
                  </template>
               </el-table-column>
            </el-table>
</template>
// js
data() {
    return {
         // 自适应高度
         tableConfig:{
            isLoading:true,
            height:window.innerHeight-180
         },
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名
        columnData:[{
            key:"userName",
            value:"姓名",
            iconColor:"red",
            icon:"el-icon-time",
            isEdit:false,
            width:80,
         },{
            key:"groupId",
            value:"项目组",
            iconColor:"red",
            icon:"el-icon-time",
            isEdit:true,
         },{
            key:"logDate",
            value:"日期",
            iconColor:"red",
            icon:"el-icon-time",
            isEdit:true,
            width:160,
         }]
    }
},
mounted: function () {
      // 初始化开始监听自适应高度数据
      window.addEventListener("resize",this.getHeigth)
},
destroyed(){
      // 销毁高度自适应监听
      window.removeEventListener("resize",this.getHeigth)
},
methods:{
      tableRowClassName({ row, rowIndex }) {
         // 把每一行的索引放进row
         row.index = rowIndex
      },
      // 添加明细原因 row 当前行 column 当前列
      tabClick(row, column, cell, event) {
         this.columnData.map(item=>{
            if(item.value == column.label){
               this.tabClickIndex = row.index
               this.tabClickLabel = column.label
            }
         })
      },
      //input框失去焦点事件
      handleInputBlur(row, event, column){   //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
         this.tabClickIndex = null
         this.tabClickLabel = ''
      },
      // 自适应高度
      getHeigth(){
         this.tableConfig.height = window.innerHeight - 180
      },
}