vue实现主从表

Vue 实现主从表

主从表是一种常见的数据展示方式，通常用于展示一对多的关系。Vue 提供了灵活的方式来实现主从表，以下是几种常见的方法。

使用 v-for 嵌套循环

通过嵌套 v-for 可以轻松实现主从表的结构。主表数据通常是一个数组，每个主表项包含一个子表数据的数组。

<template>
  <div>
    <div v-for="(masterItem, index) in masterData" :key="index">
      <h3>{{ masterItem.name }}</h3>
      <ul>
        <li v-for="(detailItem, detailIndex) in masterItem.details" :key="detailIndex">
          {{ detailItem.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      masterData: [
        {
          name: '主表项1',
          details: [
            { name: '子表项1-1' },
            { name: '子表项1-2' }
          ]
        },
        {
          name: '主表项2',
          details: [
            { name: '子表项2-1' },
            { name: '子表项2-2' }
          ]
        }
      ]
    };
  }
};
</script>

使用组件拆分

将主表和子表拆分为独立的组件，可以提高代码的可维护性和复用性。

<template>
  <div>
    <MasterTable :items="masterData" />
  </div>
</template>

<script>
import MasterTable from './MasterTable.vue';

export default {
  components: { MasterTable },
  data() {
    return {
      masterData: [
        {
          name: '主表项1',
          details: [
            { name: '子表项1-1' },
            { name: '子表项1-2' }
          ]
        },
        {
          name: '主表项2',
          details: [
            { name: '子表项2-1' },
            { name: '子表项2-2' }
          ]
        }
      ]
    };
  }
};
</script>

在 MasterTable.vue 中：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{ item.name }}</h3>
      <DetailTable :items="item.details" />
    </div>
  </div>
</template>

<script>
import DetailTable from './DetailTable.vue';

export default {
  props: ['items'],
  components: { DetailTable }
};
</script>

在 DetailTable.vue 中：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['items']
};
</script>

使用动态加载子表数据

如果子表数据量较大，可以通过异步加载的方式优化性能。

<template>
  <div>
    <div v-for="(masterItem, index) in masterData" :key="index">
      <h3 @click="loadDetails(masterItem.id)">{{ masterItem.name }}</h3>
      <ul v-if="masterItem.details">
        <li v-for="(detailItem, detailIndex) in masterItem.details" :key="detailIndex">
          {{ detailItem.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      masterData: [
        { id: 1, name: '主表项1' },
        { id: 2, name: '主表项2' }
      ]
    };
  },
  methods: {
    async loadDetails(id) {
      const response = await fetch(`/api/details/${id}`);
      const details = await response.json();
      const item = this.masterData.find(item => item.id === id);
      this.$set(item, 'details', details);
    }
  }
};
</script>

使用表格样式

如果需要以表格形式展示主从表，可以结合 table 标签和 v-for 实现。

<template>
  <table>
    <thead>
      <tr>
        <th>主表名称</th>
        <th>子表项</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(masterItem, index) in masterData" :key="index">
        <td>{{ masterItem.name }}</td>
        <td>
          <table>
            <tr v-for="(detailItem, detailIndex) in masterItem.details" :key="detailIndex">
              <td>{{ detailItem.name }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      masterData: [
        {
          name: '主表项1',
          details: [
            { name: '子表项1-1' },
            { name: '子表项1-2' }
          ]
        },
        {
          name: '主表项2',
          details: [
            { name: '子表项2-1' },
            { name: '子表项2-2' }
          ]
        }
      ]
    };
  }
};
</script>

使用第三方库

如果需要更复杂的功能（如排序、分页等），可以使用第三方表格库，如 Element UI 或 Vuetify。

以 Element UI 为例：

<template>
  <el-table :data="masterData" style="width: 100%">
    <el-table-column prop="name" label="主表名称"></el-table-column>
    <el-table-column label="子表项">
      <template #default="scope">
        <el-table :data="scope.row.details" style="width: 100%">
          <el-table-column prop="name" label="子表名称"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      masterData: [
        {
          name: '主表项1',
          details: [
            { name: '子表项1-1' },
            { name: '子表项1-2' }
          ]
        },
        {
          name: '主表项2',
          details: [
            { name: '子表项2-1' },
            { name: '子表项2-2' }
          ]
        }
      ]
    };
  }
};
</script>

以上方法可以根据实际需求选择适合的方式实现主从表功能。