element-ui - elementui中的table表格，没有自动100%宽度？

Question

页面分为 tab1、tab2 两个页签，tab2下面有el-table 组件，tab1、tab2 对应的div都采用 v-show 显示隐藏，

el-table组件，所有的列都采用 "min-width": "2" 设置宽度，当切换到 tab2 时，表格宽度一开始很窄，过一会儿才撑开到 100% 的宽度，有人遇到过吗？

Answer 1

给不同table添加不同的key试试

Answer 2

在 Element UI 的 el-table 组件中，如果你发现表格的宽度没有立即设置为 100%，这可能是由于 CSS 样式或者 Vue 的渲染机制导致的。以下是一些可能的解决方案：

1. 使用 v-if 代替 v-show：
   由于 v-show 只是简单地切换元素的 CSS display 属性，它不会触发组件的重新渲染。而 v-if 会真正地销毁和重建元素。在某些情况下，使用 v-if 可能有助于解决渲染问题。
2. 使用 resize 事件：
   你可以在切换 tab 后，监听窗口的 resize 事件，并手动设置 el-table 的宽度。但是，由于 resize 事件可能会频繁触发，你需要确保你的处理函数是高效的。
3. CSS 样式：
   确保 el-table 的父元素有明确的宽度设置，并且 el-table 本身没有设置具体的宽度，这样它就可以继承父元素的宽度。同时，检查是否有其他 CSS 规则影响了 el-table 的宽度。
4. 使用 mounted 和 watch：
   在 Vue 组件的 mounted 钩子或者使用 watch 监听数据变化时，确保表格的 DOM 已经正确渲染，然后可以手动设置表格的宽度。
5. 计算属性或方法：
   如果你想要基于列的数量或其他因素动态计算表格的宽度，可以使用计算属性或方法来设置 el-table 的样式。
6. Element UI 的样式覆盖：
   如果以上方法都不奏效，你可能需要覆盖 Element UI 的默认样式。你可以通过添加自定义的 CSS 规则来强制设置 el-table 的宽度。

以下是一个简单的示例，展示了如何在 Vue 组件中使用 mounted 钩子来设置 el-table 的宽度：

<template>  <div>    <!-- ... 其他代码 ... -->    <el-table ref="myTable" :data="tableData" style="width: 100%">      <!-- ... 表格列 ... -->    </el-table>  </div></template><script>export default {  data() {    return {      tableData: [], // 表格数据    };  },  mounted() {    // 确保 DOM 已经渲染完成    this.$nextTick(() => {      // 你可以在这里添加代码来设置表格的宽度，但通常如果父元素有 100% 宽度，el-table 也会自动填充      // 如果需要，你可以通过 this.$refs.myTable 来访问表格的 DOM 元素，并设置其样式    });  },  // ... 其他选项 ...};</script>

注意：在这个示例中，我并没有实际设置 el-table 的宽度，因为通常情况下，如果父元素有 100% 的宽度，并且 el-table 没有设置具体的宽度，它会自动填充其父元素的宽度。如果你确实需要手动设置宽度，可以通过 this.$refs.myTable.$el.style.width 来访问和设置 DOM 元素的宽度。