封装一个table组件

Question

实现表格数据展示 但是数据是分组的 如第一层是分组信息 children下才是具体的数据内容
并且的带有选择全选功能

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个需求，我们可以创建一个名为GroupedTable.vue的Vue组件。这个组件会接收一个包含分组数据的对象作为props，并且会提供全选功能。以下是详细的步骤：

1. 首先，确保已经安装了Vue.js。如果没有，可以使用npm进行安装：

npm install vue

1. 创建一个新的Vue文件GroupedTable.vue，并添加以下代码：

<template>
  <div class="grouped-table">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="allSelected" @change="toggleAllSelections" />
          </th>
          <th>Group Name</th>
          <th>Other Column Names...</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(group, index) in groupedData" :key="index">
          <td>
            <input type="checkbox" :value="index" v-model="selectedGroups" @change="updateSelections" />
          </td>
          <td>{{ group.name }}</td>
          <td v-for="(item, itemIndex) in group.children" :key="`${index}-${itemIndex}`">
            {{ item.columnName1 }} | {{ item.columnName2 }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  computed: {
    groupedData() {
      return this.data.reduce((acc, item) => {
        const existingGroup = acc.find((g) => g.name === item.group);
        if (existingGroup) {
          existingGroup.children.push(item);
        } else {
          acc.push({
            name: item.group,
            children: [item],
          });
        }
        return acc;
      }, []);
    },
  },
  data() {
    return {
      allSelected: false,
      selectedGroups: [],
    };
  },
  methods: {
    toggleAllSelections() {
      this.selectedGroups = this.allSelected ? this.groupedData.map((_, i) => i) : [];
    },
    updateSelections() {
      this.allSelected = this.selectedGroups.length === this.groupedData.length;
    },
  },
};
</script>

<style scoped>
.grouped-table {
  width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

th input[type="checkbox"] {
  margin-right: 5px;
}

tr:hover {
  background-color: #f5f5f5;
}
</style>

1. 在你的主Vue组件中，导入并使用GroupedTable组件。例如，在App.vue中：

<template>
  <div id="app">
    <GroupedTable :data="yourData" />
  </div>
</template>

<script>
import GroupedTable from "./components/GroupedTable.vue";

export default {
  components: {
    GroupedTable,
  },
  data() {
    return {
      yourData: [
        { id: 1, group: "Group A", columnName1: "Value 1A", columnName2: "Value 2A" },
        { id: 2, group: "Group A", columnName1: "Value 1B", columnName2: "Value 2B" },
        // ... 更多数据项
      ],
    };
  },
};
</script>

1. 现在，你应该能够在App.vue中看到一个分组的表格，每个分组都有一个全选框，以及每行数据也有一个单独的选择框。

注意：这个例子中的数据结构是一个对象数组，每个对象有两个属性：group（分组名称）和children（包含具体数据的数组）。如果你的数据结构不同，你需要调整groupedData计算属性以适应你的数据格式。