use element-ui to make two tables and use conditional rendering to control switching. It is found that the display is not normal using v-if, but v-show can display and switch normally. The structure of
table is as follows:
<!-- -->
<el-table :data="tableDataHistory"
v-show="enabledBill"
v-loading="loading"
v-resize="{height:41}"
element-loading-text="..."
highlight-current-row
@selection-change=" handle_selection_change">
<el-table-column type="selection">
</el-table-column>
<el-table-column prop="date" label="">
</el-table-column>
<el-table-column prop="date" label="">
</el-table-column>
</el-table>
<!-- -->
<el-table :data="tableDataEnabled"
v-show="!enabledBill"
v-loading="loading"
v-resize="{height:41}"
element-loading-text="..."
highlight-current-row
@selection-change="handle_selection_change">
<el-table-column type="selection">
</el-table-column>
<el-table-column prop="date" label="">
</el-table-column>
<el-table-column prop="date" label="">
</el-table-column>
</el-table>
using v-show, the table can be displayed and switched normally:
v-showv-if:
Why is this?