美文网首页
ElementUi开发问题记录

ElementUi开发问题记录

作者: 4ANH | 来源:发表于2020-05-11 14:12 被阅读0次

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("弹窗提醒");
}

相关文章

网友评论

      本文标题:ElementUi开发问题记录

      本文链接:https://www.haomeiwen.com/subject/hxdnmhtx.html