修复了列更改时的元素 UI 表格大小

Question

我制作了一个 Element-UI 表并使用 v-if 来控制列的显示/隐藏。它工作得很好，但有点问题。

当列显示/隐藏时，表格会自行改变大小。我已经在表格属性中固定了宽度和高度，但似乎不起作用。

为什么表格会改变大小，如何固定大小？

谢谢。

在下面的代码中，这是一个简单的示例。

var Main = {
    methods: {
      show(num) {
        if(num == 1){
          this.show1 = !this.show1;
        }
        if(num == 2){
          this.show2 = !this.show2;
        }
        if(num == 3){
          this.show3 = !this.show3;
        }
      }
    },
    data() {
      return {
        show1: true,
        show2: true,
        show3: true,
        tableData:  [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
.el-table td{
    background: #F2F6FC;
 }

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <el-button type="success" @click="show(1)">Show/Hide Date</el-button>
  <el-button type="success" @click="show(2)">Show/Hide Name</el-button>
  <el-button type="success" @click="show(3)">Show/Hide Address</el-button>
  <el-table
    :data="tableData"
    style="width: 600px"
    height = 300>
    <el-table-column
      v-if = "show1"
      prop="date"
      label="Date"
      width="250">
    </el-table-column>
    <el-table-column
      v-if = "show2"
      prop="name"
      label="Name"
      width="250">
    </el-table-column>
    <el-table-column
      v-if = "show3"
      prop="address"
      label="Address"
      width="300">
    </el-table-column>
  </el-table>
</template>
</div>

Answer 1

除了Halil's answer，我注意到在使用height 设置固定高度时，以及在修改v-for 中使用的columns 时，高度上存在调整大小问题。

作为一种解决方法，设置 max-height 而不是 height 对我有用。

起源可能与这个相同。

我的示例代码：

<el-table
  :data="table"
  :default-sort="{ prop: 'foo' }"
  :max-height="600"
>
  <el-table-column
    v-for="col in columns"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
    :width="col.width"
    sortable
    :sort-method="(a, b) => sortTableColumn(a, b, col.prop)"
  />
</el-table>

Answer 2

您不应该使用v-if 来使其大小固定。更改目标元素的样式，如visibility: hidden，而不是使用v-if。当您使用v-if 时，它会删除 DOM 上的元素，这就是您的表格大小发生变化的原因。这是一个讨厌的解决方案，但这是最快的方法。

一个例子

<el-table-column
   style = "{ visibility: show1 ? 'hidden' : 'visible' }"
   prop="date"
   label="Date"
   width="250">
</el-table-column>