vue 主从表实现

主从表实现的基本思路

主从表通常指一个主表（Master）和关联的从表（Detail），用户操作主表数据时动态加载对应的从表数据。Vue中可以通过以下方式实现：

数据绑定与结构设计

主表和从表数据通常分别存储在data中：

data() {
  return {
    masterList: [],    // 主表数据
    detailList: [],    // 从表数据
    selectedMaster: null  // 当前选中的主表项
  }
}

主表事件处理

通过@click或@change事件触发从表加载：

<table>
  <tr v-for="item in masterList" 
      @click="loadDetails(item.id)"
      :class="{ active: selectedMaster === item.id }">
    <td>{{ item.name }}</td>
  </tr>
</table>

从表动态加载

在方法中实现从表数据获取：

methods: {
  async loadDetails(masterId) {
    this.selectedMaster = masterId;
    const res = await axios.get(`/api/details?master_id=${masterId}`);
    this.detailList = res.data;
  }
}

从表渲染

根据主表选择渲染对应的从表数据：

<div v-if="selectedMaster">
  <table>
    <tr v-for="detail in detailList">
      <td>{{ detail.content }}</td>
    </tr>
  </table>
</div>

使用计算属性优化

对于复杂关联数据，可以使用计算属性：

computed: {
  filteredDetails() {
    return this.detailList.filter(item => 
      item.masterId === this.selectedMaster
    );
  }
}

组件化实现（推荐）

将主从表拆分为独立组件更易维护：

<MasterTable 
  :items="masterList"
  @select="loadDetails"/>

<DetailTable 
  v-if="selectedMaster"
  :items="detailList"/>

状态管理（Vuex）

对于大型应用，建议使用Vuex管理状态：

// store.js
state: {
  master: {},
  details: []
},
mutations: {
  SET_DETAILS(state, payload) {
    state.details = payload;
  }
}

注意事项

• 主从表数据加载应添加加载状态指示
• 考虑添加防抖处理高频主表切换
• 从表数据为空时需要显示友好提示
• 主表选中状态需高亮显示