Table 表格固定表头却无法自适应高度
<el-table height="a" ref="multipleTable" :data="data" @selection-change="multipleSelection=$event">
//增加height属性会固定表头滚动tbody,但无法calc计算高度,使用任意非正常值即可优先使用本地高度样式, multipleSelection为自定义复选框集合
<el-table-column type="selection"></el-table-column> //多选框
<el-table-column type="index" label="编号"></el-table-column> //type="index":序号 1 2 3 4...
<el-table-column label="状态" prop="name" width="70">
//label:顶部label prop:对应数据中的Key width:固定宽度,不随页面缩放而变化,无width标签自适应
<template slot="header" slot-scope="scope"></template> //自定义头部
<template slot-scope="scope"> //自定义内容
//scope(data)
// scope.row.xx
// scope.$index
</template>
</el-table-column>
</el-table>
//全选&&反选
toggleSelection(rows) {
if (this.multipleSelection.length >= this.data.length) {
this.$refs.multipleTable.clearSelection();
} else {
this.data.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true);
});
}
}
Message 消息提示--渲染页面后消失
this.$message.error("弹窗内容"); //默认3000毫秒后关闭
注意:当页面重新渲染弹窗会立即消失(案例-删除成功重新调用列表),解决方案:
//1.延时渲染页面-体验较差
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning',
onClose: ()=>{
//在此处渲染页面
}
});
//2.获取列表成功时弹出执行信息
getList(mess){ //获取列表
...
this.data=res.data;
mess&&this.$nextTick(()=>{this.$message.success(mess)});
},
detItem(){ //删除项
this.getList("弹窗提醒");
}
网友评论