|
|
@@ -0,0 +1,89 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <table class="data-table">
|
|
|
+ <!-- 表头 -->
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th v-for="(header, index) in headers" :key="index">
|
|
|
+ {{ header }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <!-- 数据行 -->
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
|
|
|
+ <td v-for="(cell, cellIndex) in row" :key="cellIndex">
|
|
|
+ {{ cell }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "generalTableList",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [] // 初始为空
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ headers() {
|
|
|
+ return this.list[0] || []; // 避免未加载时报错
|
|
|
+ },
|
|
|
+ tableData() {
|
|
|
+ return this.list.slice(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ values: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ // 模拟异步获取数据
|
|
|
+ this.list = await this.fetchDataFromBackend();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ok() {
|
|
|
+ this.$emit('callbackMethod',this.values);
|
|
|
+ },
|
|
|
+ async fetchDataFromBackend() {
|
|
|
+ // 实际项目中替换为真实的 API 请求
|
|
|
+ const mockData =
|
|
|
+ [
|
|
|
+ ["姓名", "年龄", "城市"],
|
|
|
+ ["张三", 25, "北京"],
|
|
|
+ ["李四", 30, "上海"],
|
|
|
+ ["王五", 28, "深圳"],
|
|
|
+ ];
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ setTimeout(() => resolve(this.values), 500); // 模拟延迟
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.data-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+.data-table th, .data-table td {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.data-table th {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+.data-table tr:nth-child(even) {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+}
|
|
|
+.data-table tr:hover {
|
|
|
+ background-color: #e9e9e9;
|
|
|
+}
|
|
|
+</style>
|