element-ui中的el-dialog关于slot懒加载的问题

问题描述

由于使用的是dialog的slot，需要在dialog显示一个table

但是在IE 11上遇到了一个问题
在第一次打开的时候，table的宽度并不能正确的获取

正常：

问题分析

element-ui设计是比较趋于完善的了，dialog的solt使用懒加载是处于性能优化的原因，官方也提供了回调事件去解决这个问题，比如需要在dialog获取到ref

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

解决方法

给组件绑定一个v-show，在打开dialog的时候再显示这个table
在chorm上已经完美解决了，但是在万恶的IE浏览器上依然有问题。

 <el-dialog title="申请记录表" :visible.sync="dialogTableVisible" @opened="open" v-loading="!table">
    <el-table :data="gridData" v-show="table">
    /***/
    <script>
		export default {
		  data() {
		    return {
		      table: false
		    };
		   methods: {
		    open() {
		      this.table = true;
		    }
		  }
 	 </script>

没办法，只能去添加定时器进行延迟显示。

 <el-dialog title="申请记录表" :visible.sync="dialogTableVisible" @opened="open" v-loading="!table">
    <el-table :data="gridData" v-show="table">
    /***/
    <script>
		export default {
		  data() {
		    return {
		      table: false
		    };
		   methods: {
		    open() {
		      this.setTimeout(_=>this.table = true,1000)
		    }
		  }
 	 </script>

视觉优化

配合el-loading，在table加载出来前loading

<el-row v-loading="!table">
      <el-table :data="gridData" v-show="table">
      /****/