element el-tabs循环渲染表格踩坑细节 el-table无数据高度撑不开 ajax请求问题 table ref取不到

简略代码<el-tabs v-model="type" :tab-position="tabPosition" type="border-card" @tab-click="handleClick"> //handleClick tab切换时重新请求数据<el-tab-pane v-for="(item, index) in table" :key="index" :label=

码住不放松

4805人浏览 · 2022-05-17 11:20:58

码住不放松 · 2022-05-17 11:20:58 发布

简略代码

<el-tabs v-model="type" :tab-position="tabPosition" type="border-card" @tab-click="handleClick"> //handleClick tab切换时重新请求数据
   <el-tab-pane v-for="(item, index) in table" :key="index" :label="item.label" :name="item.value">
      <div v-if="type == item.value" style="height: 100%"> //v-if 每次切换都要重新渲染，否则页面不会改变
        <el-table
          :ref="el => listRef[index]=el"
        >
        </el-table>
        </div>
   </el-tab-pane>
 </el-tabs>

问题一：当table的ref=“listTable”时，refs.listTable取不到

解决办法 :ref="el => listRef[index]=el" 给ref赋值使用时listRef[0]，永远取第一个，因为每次数组里只会有一个值

问题二：表格是循环渲染，第一次渲染时会请求五次ajax（参数相同），导致tab切换时不请求ajax，页面不发生改变

解决办法添加v-if，确保，每次tab切换时会重新请求

问题三：表格无数据时，表格高度撑不开

解决办法将最外层的宽度撑开

.el-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  :deep {
    .el-tabs__content {
      flex: 1;
    }
    .el-tab-pane {
      height: 100%;
    }
  }
}