Element-UI的table使用tab页切换行展示行错位问题修复

Element-UI的table使用tag页切换行展示行错位问题修复

项目中的场景：

1. 菜单内使用el-tabs组件然后分为汇总和详情两个tab，两个独自请求列表展示正常，当点击其他菜单再进行切回的时候详情tab页的序号和其他行展示错误

解决：

1. 首先table是封装的组件，在封装组件中对组件中没有处理activated

 activated() {
    this.$refs.table && this.$refs.table.doLayout()
  }

2. 其次在写tabs 的 el-tab-pane 可以写入单独的key 里面的组件可以用v-if去控制

<template>
    <div class="main-wrap">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$lang('汇总')" name="first" :key="'first'">
              <CollectList v-if="isShowFirst" @toDetail="toDetail"></CollectList>
            </el-tab-pane>
            <el-tab-pane :label="$lang('明细')" name="second" :key="'second'">
              <DetailList v-if="!isShowFirst" detailParams="detailParams"></DetailList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import CollectList from './checkConfirmationCollect.vue'
import DetailList from './checkConfirmationDetail.vue'

export default {
  name: 'CheckConfirmation',
  components: { CollectList, DetailList },
  data() {
    return {
      isShowFirst: true,
      activeName: 'first', // 当前列表tab项
      detailParams: {} // 明细
    }
  },
  created () {
  },
  methods: {
    // 列表tab切换
    handleClick(tab, event) {
      if (tab.name === 'first') {
        this.isShowFirst = true
      } else {
        this.isShowFirst = false
      }
      this.$bus.$emit('doLayout')
    },
    toDetail(obj) {
      this.isShowFirst = false
      this.detailParams = obj
      this.activeName = 'second'
    }
  }
}
</script>

<style lang="scss">
</style>