Wed Nov 22 15:28:00 CST 2023 inscode

src/component/main/verticalTable/verticalTable.vue

 <script setup>
-import { ref } from 'vue'
-const tableArr = ref([
-    {
-        key: "姓名",
-        value: "孙悟空",
-    },
-    {
-        key: "年龄",
-        value: 500,
-    },
-    {
-        key: "身高",
-        value: "山一样高",
-    },
-    {
-        key: "性别",
-        value: "男",
-    },
-    {
-        key: "住址",
-        value: "花果山水帘洞",
-    },
-    {
-        key: "学历",
-        value: "天庭弼马温学历",
-    },
-    {
-        key: "能力",
-        value: "强",
-    },
-    {
-        key: "外号",
-        value: "齐天大圣",
-    },
-])
+const objectSpanMethod = ({
+  row,
+  column,
+  rowIndex,
+  columnIndex,
+}) => {
+  if (columnIndex === 0) {
+    if (rowIndex % 4 === 0) {
+      return {
+        rowspan: 4,
+        colspan: 1,
+      }
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      }
+    }
+  }
+}
 
-const howWidth = ref(8)
+const tableData = [
+  {
+    id: '12987122',
+    name: 'Tom',
+    amount1: '234',
+    amount2: '3.2',
+    amount3: 10,
+  },
+  {
+    id: '12987123',
+    name: 'Tom',
+    amount1: '165',
+    amount2: '4.43',
+    amount3: 12,
+  },
+  {
+    id: '12987124',
+    name: 'Tom',
+    amount1: '324',
+    amount2: '1.9',
+    amount3: 9,
+  },
+  {
+    id: '12987125',
+    name: 'Tom',
+    amount1: '621',
+    amount2: '2.2',
+    amount3: 17,
+  },
+  {
+    id: '12987126',
+    name: 'Tom',
+    amount1: '539',
+    amount2: '4.1',
+    amount3: 15,
+  },
+]
 
 </script>
 
 <template>
-    <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
-        <div class="box">
-            <div class="content1">{{ item.key }}</div>
-            <el-row>
-                <div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
-            </el-row>
-        </div>
-    </el-col>
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+      :show-header="false"
+    >
+      <el-table-column prop="id" label="ID" width="180" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="amount1" label="Amount 1" />
+      <el-table-column prop="amount2" label="Amount 2" />
+      <el-table-column prop="amount3" label="Amount 3" />
+    </el-table>
 </template>
 
 
-<style scoped>
-.box {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    border-left: 1px solid #e9e9e9;
-    border-top: 1px solid #e9e9e9;
-}
-
-.box .content1 {
-    width: 40%;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background-color: #fafafa;
-    border-right: 1px solid #e9e9e9;
-    border-bottom: 1px solid #e9e9e9;
-    color: #333;
-    font-size: 14px;
-}
-
-
-.box .content2 {
-    width: 60%;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background-color: #fff;
-    border-right: 1px solid #e9e9e9;
-    border-bottom: 1px solid #e9e9e9;
-    color: #b0b0b2;
-    font-size: 14px;
-}
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file