ソースを参照

feat: 增加客户管理表单通用表格自定义组件

zhaojianyang 3 ヶ月 前
コミット
75f1ca921f

+ 89 - 0
src/views/flowCustomComponents/blinkCustomer/generalTableList.vue

@@ -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>

+ 2 - 1
src/views/flowCustomComponents/components_custom.js

@@ -9,8 +9,9 @@ import scouting from './planApproveForm/scouting.vue'
 import SolicitOpinions from './planApproveForm/SolicitOpinions.vue'
 import cover from './flowPrintPreview/cover.vue'
 import subOfficeInfo from './subOfficeInfo/index.vue'
+import generalTableList from "./blinkCustomer/generalTableList.vue";
 export default {
-    test, testChild, planApproveForm, scouting, SolicitOpinions, cover, supplierEvaluationForm,subOfficeInfo
+    test, testChild, planApproveForm, scouting, SolicitOpinions, cover, supplierEvaluationForm,subOfficeInfo,generalTableList
 };