From 303dd4fecfbdffd0d2f2e8278a4b1cbeec0dac8a Mon Sep 17 00:00:00 2001
From: gis-xh <1612990205@qq.com>
Date: Fri, 29 Jul 2022 14:43:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E4=B8=AD=E7=9A=84=E5=B0=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en.js                             |  2 +-
 src/i18n/zh.js                             |  2 +-
 src/views/goods/components/tableList.vue   | 90 ++++++++++++++++++++++
 src/views/goods/zdGoods.vue                |  7 +-
 src/views/users/components/dialogIndex.vue |  2 +-
 src/views/users/zdUsers.vue                |  2 +-
 6 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 src/views/goods/components/tableList.vue

diff --git a/src/i18n/en.js b/src/i18n/en.js
index 540a42a..9c68403 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -31,7 +31,7 @@ export default {
     placeholder: 'Please enter a user name to search for'
   },
   message: {
-    updeteSuccess: 'update successfully'
+    updateSuccess: 'update successfully'
   },
   driver: {
     doneBtnText: 'done',
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index 8d3606b..295098e 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -31,7 +31,7 @@ export default {
     placeholder: '请输入搜索的用户姓名'
   },
   message: {
-    updeteSuccess: '更新成功'
+    updateSuccess: '更新成功'
   },
   driver: {
     doneBtnText: '完成',
diff --git a/src/views/goods/components/tableList.vue b/src/views/goods/components/tableList.vue
new file mode 100644
index 0000000..3106ee1
--- /dev/null
+++ b/src/views/goods/components/tableList.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="m50">
+    <div class="testTitle">默认横排</div>
+    <el-table border :data="originData">
+      <el-table-column label="行政区划" property="name" align="center">
+      </el-table-column>
+      <el-table-column label="隶属" property="region" align="center">
+      </el-table-column>
+      <el-table-column label="海拔" property="elevation" align="center">
+      </el-table-column>
+    </el-table>
+
+    <!-- 转化后 -->
+    <div class="testTitle">转化后</div>
+    <el-table border :data="transData">
+      <el-table-column
+        v-for="(item, index) in transTitle"
+        :label="item"
+        :key="index"
+        :index="index + ''"
+        align="center"
+      >
+        <template v-slot="scope">
+          {{ scope.row[index] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const originData = ref([
+  ({
+    name: '湖北省武汉市某区',
+    region: '武汉市',
+    elevation: '150m'
+  },
+  {
+    name: '湖北省武汉市某区',
+    region: '黄石市',
+    elevation: '200m'
+  },
+  {
+    name: '湖北省武汉市某区',
+    region: '荆州市',
+    elevation: '200m'
+  })
+])
+// originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
+const originTitle = ref(['行政区划', '隶属', '海拔'])
+// transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
+const transTitle = ref(['字段名', '属性内容'])
+const transData = ref([])
+
+onMounted(() => {
+  // 数组按矩阵思路, 变成转置矩阵
+  const matrixData = originData.value.map((row) => {
+    const arr = []
+    for (const key in row) {
+      arr.push(row[key])
+    }
+    return arr
+  })
+  console.log(matrixData)
+  // 加入标题拼接最终的数据
+  transData.value = matrixData[0].map((col, i) => {
+    return [
+      originTitle.value[i],
+      ...matrixData.map((row) => {
+        return row[i]
+      })
+    ]
+  })
+  console.log(transData.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.m50 {
+  margin: 50px;
+}
+.testTitle {
+  margin: 3vh 0;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>
diff --git a/src/views/goods/zdGoods.vue b/src/views/goods/zdGoods.vue
index 1cbfb88..30e888b 100644
--- a/src/views/goods/zdGoods.vue
+++ b/src/views/goods/zdGoods.vue
@@ -1,7 +1,10 @@
 <template>
-  <div>goods</div>
+  <div>表格纵向表头测试</div>
+  <Tablelist />
 </template>
 
-<script setup></script>
+<script setup>
+import Tablelist from './components/tableList.vue'
+</script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/users/components/dialogIndex.vue b/src/views/users/components/dialogIndex.vue
index 9c1d946..59a96c0 100644
--- a/src/views/users/components/dialogIndex.vue
+++ b/src/views/users/components/dialogIndex.vue
@@ -125,7 +125,7 @@ const handleConfirm = () => {
         : await editUser(ruleForm.value)
       ElMessage({
         // showClose: true,
-        message: i18n.global.t('message.updeteSuccess'),
+        message: i18n.global.t('message.updateSuccess'),
         type: 'success'
       })
       emits('initUserList')
diff --git a/src/views/users/zdUsers.vue b/src/views/users/zdUsers.vue
index af06354..917fb93 100644
--- a/src/views/users/zdUsers.vue
+++ b/src/views/users/zdUsers.vue
@@ -121,7 +121,7 @@ const changeState = async (info) => {
   await changeUserState(info.id, info.mg_state)
   ElMessage({
     // showClose: true,
-    message: i18n.t('message.updeteSuccess'),
+    message: i18n.t('message.updateSuccess'),
     type: 'success'
   })
 }