element table表格点击单元格实现编辑+表格高度自适应
{{ getLabelGroup(scope.row[item.key]) }}
{{ scope.row[item.key] }}
{{ scope.row[item.key] }}
删除
提交
// 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
},
}