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



// 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
            }
         })
      },
      // 自适应高度
      getHeigth(){
         this.tableConfig.height = window.innerHeight - 180
      },
}