解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

当使用elementUI中的Tabs组件进行Tab切换时，如果其中一个Tab下有一个el-table表格组件且该表格组件使用了固定列功能，那么切换到该Tab后，表格底部会出现一条线，影响了美观度。为了解决这个问题，我们需要使用以下攻略：

第一步：在el-table上设置需要固定的列数

在使用el-table组件时，单元格的宽度都会由表格自身的宽度来决定。同时，我们又可以通过设置固定列数来限制表格中的列数，以确保每列的宽度都相同。需要注意的是，在设置固定列数时，我们需要指定固定列的位置。例如，我们可以指定左侧两列列固定，右侧两列为普通列。

以下是一个例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="70"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column fixed="left" prop="address" label="地址" width="300"></el-table-column>
    <el-table-column fixed="left" prop="phone" label="电话" width="180"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template slot-scope="scope">
        <el-button type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的代码中，我们通过fixed属性来设置表格的固定列，其中left表示固定在表格左侧，right表示固定在表格右侧。通过设置固定列，我们可以保证当表格宽度发生变化时，固定列的宽度不变。

第二步：在Tabs组件上设置lazy-render属性

在使用el-tabs组件时，我们可以通过设置lazy-render属性来实现Tab切换时不渲染隐藏Tab页。这可以加快页面加载速度。

以下是一个例子：

<template>
  <el-tabs v-model="activeName" type="border-card" lazy-render>
    <el-tab-pane label="用户管理" name="user">
      <el-table :data="tableData" style="width: 100%">
        <!-- 省略表格列的设置 -->
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="role">
      <el-table :data="tableData" style="width: 100%">
        <!-- 省略表格列的设置 -->
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'user',
      tableData: []
    };
  },
  mounted() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.tableData = [
        { name: '张三', age: 18, address: '中国北京市海淀区', phone: '13012345678', email: '[e-mail]' },
        { name: '李四', age: 25, address: '中国上海市浦东新区', phone: '13112345678', email: '[e-mail]' },
        { name: '王五', age: 32, address: '中国广州市天河区', phone: '13212345678', email: '[e-mail]' },
        { name: '赵六', age: 41, address: '中国深圳市福田区', phone: '13312345678', email: '[e-mail]' },
        { name: '钱七', age: 50, address: '中国成都市武侯区', phone: '13412345678', email: '[e-mail]' }
      ];
    }, 500);
  }
};
</script>

在上面的代码中，我们通过设置lazy-render属性来实现Tab切换时不渲染隐藏Tab页。这样就可以避免在Tab页切换时出现显示异常的问题，从而解决了el-table出现边框线条问题。