vue 实现tab表格

Vue实现Tab表格

在Vue中实现Tab表格功能，可以通过结合<el-tabs>和<el-table>组件（Element UI）或自定义实现。以下是两种常见方法：

使用Element UI组件

安装Element UI（若未安装）：

npm install element-ui

示例代码：

<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="表格1" name="table1">
        <el-table :data="tableData1" border>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表格2" name="table2">
        <el-table :data="tableData2" border>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'table1',
      tableData1: [{ date: '2023-01-01', name: '张三' }],
      tableData2: [{ date: '2023-01-02', address: '北京' }]
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log('切换至:', tab.name)
    }
  }
}
</script>

自定义Tab切换

若不使用UI库，可通过动态组件或v-if实现：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="activeTab = tab.name"
        :class="{ active: activeTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>

    <div class="table-container">
      <table v-if="activeTab === 'table1'">
        <tr v-for="(item, index) in tableData1" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </table>

      <table v-if="activeTab === 'table2'">
        <tr v-for="(item, index) in tableData2" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'table1',
      tabs: [
        { label: '表格1', name: 'table1' },
        { label: '表格2', name: 'table2' }
      ],
      tableData1: [{ date: '2023-01-01', name: '张三' }],
      tableData2: [{ date: '2023-01-02', address: '北京' }]
    }
  }
}
</script>

<style>
.tabs button.active {
  background: #409EFF;
  color: white;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

动态加载数据

如需切换Tab时动态加载数据，可通过watch监听activeTab：

watch: {
  activeTab(newVal) {
    if (newVal === 'table1' && !this.tableData1.length) {
      this.fetchData1()
    } else if (newVal === 'table2' && !this.tableData2.length) {
      this.fetchData2()
    }
  }
},
methods: {
  async fetchData1() {
    this.tableData1 = await api.getTable1Data()
  },
  async fetchData2() {
    this.tableData2 = await api.getTable2Data()
  }
}