el-tab-pane v-if 下的ref怎么获取

要获取el-tab-pane v-if下的ref，可以使用this.$refs.tabs.$children.$refs.tabs的方法。通过这个方法可以获取到所有tab页签的dom元素的集合。然后可以遍历这个集合，通过判断id是否包含顶部页签的值，来找到对应的el-tab-pane。如引用中所示，可以使用item.id.includes(this.srcTabActive)来判断是否是需要的el-tab-pane。如果是需要的el-tab-pane，则可以对其进行相应的操作，例如修改样式。注意观察el-tab-pane的dom结构，你会发现el-tab-pane会生成一个唯一的id，id的值是tab-加上name属性的值，可以根据这个特点来进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

el-tab-pane里面的ref失效

el-tab-pane里面的ref失效可能是因为在循环渲染时，每个el-tab-pane的ref属性都被赋值为相同的表达式，导致最终只有最后一个el-tab-pane的ref生效。解决这个问题的方法是使用一个数组来存储每个el-table的ref属性，并在使用时通过索引来获取相应的el-table。可以通过在el-tab-pane的v-for循环中使用ref数组来实现，例如使用:listRef[index]来设置el-table的ref属性。这样，每个el-tab-pane的ref属性将会有不同的值，以保证ref的唯一性和正确性。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

el-tab-pane里套el-tabs内容不显示

在使用el-tabs时，遇到el-tab-pane内容不显示的问题，可以尝试以下解决方法。首先，检查el-tabs的使用方式是否正确，确保v-model和tab-click属性已正确设置。例如:

<el-tabs v-model="settype" tab-click="tabClick" ref="tabs">
  <el-tab-pane label="广告位设置" name="bannerset">广告位设置</el-tab-pane>
  <el-tab-pane label="推送设置" name="sendset">推送设置</el-tab-pane>
  <el-tab-pane label="权限管理" name="authset">权限管理</el-tab-pane>
</el-tabs>

如果el-tab-pane里套el-tabs内容还是不显示，可以尝试升级vue和element-ui版本。找到项目中的package.json文件，将vue版本修改为2.6.0，element-ui版本修改为2.13.2，同时也要修改vue-template-compiler版本为2.6.0。然后运行npm i等待升级完成，并重启项目。这样可以解决el-tab-pane内容不显示的问题。