tools

package.json

@@ -12,6 +12,7 @@
     "dayjs": "^1.11.5",
     "element-ui": "^2.13.2",
     "hex-rgb": "^5.0.0",
+    "mockjs": "^1.1.0",
     "moment": "^2.27.0",
     "rgb-hex": "^4.0.0",
     "vue": "^2.6.11",
@@ -20,6 +21,7 @@
     "xlsx": "^0.16.5"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.0.1",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-router": "~4.4.0",
     "@vue/cli-plugin-vuex": "~4.4.0",

src/router/index.js

@@ -81,6 +81,21 @@ const routes = [
                 component: () => import('@/views/About.vue'),
             }
         ]
+    },
+    {
+        path: '/user',
+        component: Layout,
+        meta: {
+            title: "生成用户信息",
+            icon: "el-icon-s-custom"
+        },
+        children: [
+            {
+                path: 'index',
+                name: 'Abuout',
+                component: () => import('@/views/UserInfo.vue'),
+            }
+        ]
     }
 ]
 

src/views/UserAuto.vue

@@ -32,6 +32,9 @@
       <el-table-column prop="studentNo"
                        label="学号">
       </el-table-column>
+      <el-table-column prop="address"
+                       label="地址信息">
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -41,6 +44,8 @@
 //例如：import 《组件名称》 from '《组件路径》';
 import moment from "moment";
 import excelExport from "@/utils/excelExport";
+import { faker } from '@faker-js/faker/locale/zh_CN';
+import Mock from "mockjs";
 
 export default {
   name: "UserAuto",
@@ -82,11 +87,14 @@ export default {
       this.list = [];
       let stuNo = moment().format("YYYYMMDDHHmmss")
       for (let i = 0; i < this.count; i++) {
+        let address = `${Mock.Random.county(true).replaceAll(' ','')}${faker.location.streetAddress()}`
         let item = {
           name: this.getName(),
           phone: this.getMoble(),
           cardNo: this.getCardNo(),
-          studentNo: `${stuNo}${this.gteNo(i + 1)}`
+          studentNo: `${stuNo}${this.gteNo(i + 1)}`,
+          // address:faker.location.streetAddress()
+          address:address
         }
         item.sex = this.getSex(item.cardNo);
         this.list.push(item);

src/views/UserInfo.vue

@@ -0,0 +1,96 @@
+<!--  -->
+<template>
+  <div class="user-info">
+    <div>
+      <el-radio-group v-model="radio1">
+        <el-radio-button label="zh_CN">中文</el-radio-button>
+        <el-radio-button label="en">英文</el-radio-button>
+      </el-radio-group>
+      <el-button type="primary"
+                 class="ml30"
+                 @click="getUserList">生成数据</el-button>
+    </div>
+    <el-table :data="list"
+              style="width: 100%">
+      <el-table-column prop="name"
+                       label="姓名"
+                       width="280">
+      </el-table-column>
+      <el-table-column prop="email"
+                       label="邮箱"
+                       width="280">
+      </el-table-column>
+      <el-table-column prop="address"
+                       label="地址信息">
+      </el-table-column>
+      <el-table-column prop="desc"
+                       label="个人简介">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import {fakerEN_US,fakerZH_CN} from '@faker-js/faker';
+import Mock from "mockjs";
+console.log("FA_CN",fakerZH_CN)
+export default {
+  name: "UserInfo",
+  props: {},
+  components: {},
+  data () {
+    return {
+      radio1: "zh_CN",
+      list: []
+    }
+  },
+  computed: {},
+  watch: {},
+  async created () { },
+  async mounted () { },
+  methods: {
+    getUserList () {
+      let list = [];
+      for (let index = 0; index < 100; index++) {
+        if (this.radio1 == 'zh_CN') {
+          let address = `${Mock.Random.county(true).replaceAll(' ', '')}${fakerZH_CN.location.streetAddress()}`
+          let item = {
+            name: Mock.Random.cname(),
+            email: fakerZH_CN.internet.email(),
+            address: address,
+						desc:Mock.Random.cparagraph( 2, 5 )
+          }
+          list.push(item)
+        } else {
+          let address = `${fakerEN_US.location.streetAddress()}`
+          let item = {
+            name: Mock.Random.name(true),
+            email: fakerEN_US.internet.email(),
+            address: address,
+						desc:fakerEN_US.lorem.paragraph({ min: 2, max: 5 })
+          }
+          list.push(item)
+        }
+
+      }
+
+      this.list = list;
+    }
+  },
+  filters: {}
+}
+</script>
+<!-- 单页私有css -->
+<style scoped>
+.user-info {
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 600px;
+}
+.ml30 {
+  margin-left: 30px;
+}
+</style>
+<!-- 页面css，单页应用时谨防css覆盖问题 -->
+<style>
+</style>