el-table引起的布局样式问题皆可用

最新推荐文章于 2024-10-15 14:57:16 发布

想做曹老板

最新推荐文章于 2024-10-15 14:57:16 发布

阅读量428

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/wushuai0309/article/details/124989818

版权

bug描述

点击切换关联设备最开始位置在左侧，后变为中间

解决bug

el-table内置方法：监听el-tabs的切换按钮变化，当变化为table表格时候调用此方法

<el-tabs type="card" v-model="tab">
    <el-tab-pane label="规则内容" name="1">
       <RuleContent
           :dnns="ruleInfo.dnns"
           :rule-id="ruleInfo.id"
           @updateDetail="getRuleDetail"
        ></RuleContent>
     </el-tab-pane>
     <el-tab-pane label="关联设备" name="2">
         <RelatedEquipment ref="relate"></RelatedEquipment>
      </el-tab-pane>
</el-tabs>

watch: {
            tab: {
                handler(v) {
                    if (v == '2') {
                        this.$nextTick(() => {
                            this.$refs.relate.$refs.readyCancelTable.doLayout()
                        })
                    }
                }
            }
        },
//RelatedEquipment封装的table组件
 <el-table
     :header-cell-style="{ background: '#f5f7fa' }"
     :data="tableData"
     v-loading="loading"
     @selection-change="changeSelection"
     ref="readyCancelTable"
   >