Vue项目实战-新能源汽车可视化（一）（持续更新中）

一.项目代码

1.App.vue

<template><!-- 模板--><div id="wrapper"><div style="width: 100%"><el-tabs v-model="activeName" id="tabs"> <!-- 标签栏里包含了三个标签面板，分别是研发与维修、车辆销售、车队管理--><el-tab-pane label="研发与维修" name="first"><div class = "title"><img src ="./assets/images/logo.png" class="img" /><p class="leftline" ><img src="./assets/images/leftLine.png"></p><p class="rightline"><img src="./assets/images/rightLine.png"></p></div><ul class="menu"><li v-for="(item,index) in yanfa" @click="goto(item.url,index,item)" :class="{'active':item.show===true,'list':true}"><router-link v-bind:to="item.url">{{item.name}}</router-link></li></ul><router-view></router-view></el-tab-pane><el-tab-pane label="车辆销售" name="second"><div class = "title"><img src ="./assets/images/logo.png" class="img" /><p class="leftline" ><img src="./assets/images/leftLine.png"></p><p class="rightline"><img src="./assets/images/rightLine.png"></p></div><ul class="menu"><li class="list active"><router-link to="/Salesdata">销售数据</router-link></li><li class="list"><router-link to="/Salesdetails">销售明细</router-link></li><li class="list"><router-link to="/Saleslists">销售列表</router-link></li></ul><router-view></router-view></el-tab-pane><el-tab-pane label="车队管理" name="third"><div class = "title"><img src ="./assets/images/logo.png" class="img" /><p class="leftline" ><img src="./assets/images/leftLine.png"></p><p class="rightline"><img src="./assets/images/rightLine.png"></p></div><ul class="menu"><li class="list active"><router-link to="/Vehiclemonitoring">车辆监控</router-link></li><li class="list"><router-link to="/Fleetdata">车队数据</router-link></li><li class="list"><router-link to="/VehicleProfile">车辆概况</router-link></li></ul><router-view></router-view></el-tab-pane></el-tabs></div></div>
</template><script> //脚本import './assets/Style/table.css'
import router from './router'
export default {data() {return {activeName: 'first' ,// 默认选中的标签面板 yanfa: [{name: "数据大屏",url: 'DataScreen',show: true},{name: "统计分析",url: 'DataStatistics',show: false},{name: "单车监控",url: 'RealTimeMonitoring',show: false},{name: "车辆管理",url: 'VehicleManagement',show: false},{name: "用户管理",url: 'UserManagement',show: false}]}}, //数据定义结束//定义函数methods:{//如果当前项被点击，则把当前项的show设置为true，否则为falsegoto (name,i,item) {item.show = !item.show;for(var j=0;j<this.yanfa.length;j++){if(j!==i){this.yanfa[j].show = false}}}}}
</script><style> /*样式*/
/* 设置html和body的行高为继承 */
html, body {line-height: inherit;
}/* 设置html、body和#wrapper的背景图片、尺寸和定位 */
html, body, #wrapper {background-image: url('assets/true.png'); /* 背景图片 */width: 100%; /* 宽度100% */height: 100%; /* 高度100% */position: fixed; /* 固定定位 */background-repeat: no-repeat; /* 背景不重复 */background-size: cover; /* 背景覆盖整个容器 */-webkit-background-size: cover; /* 兼容Webkit浏览器 */-o-background-size: cover; /* 兼容Opera浏览器 */background-position: center 0; /* 背景图片位置 */overflow-y: auto; /* 垂直方向允许滚动 */
}/* 设置.title的样式 */
.title {width: 100%; /* 宽度100% */height: 55px; /* 高度55px */background: url("./assets/images/headerBox.png") no-repeat; /* 背景图片不重复 */background-size: 100%; /* 背景图片大小 */text-align: center; /* 文本居中 */position: relative; /* 相对定位 */
}/* 设置图片宽度 */
.img {width: 24%; /* 宽度24% */
}/* 设置左线条样式 */
.leftline {position: absolute; /* 绝对定位 */top: 10px; /* 距顶部10px */width: 24%; /* 宽度24% */left: calc(50% - 600px); /* 计算左侧位置 */
}/* 设置右线条样式 */
.rightline {position: absolute; /* 绝对定位 */top: 10px; /* 距顶部10px */width: 24%; /* 宽度24% */right: calc(50% - 600px); /* 计算右侧位置 */z-index: 103; /* 层级 */
}/* 设置菜单列表样式 */
ul.menu {padding: 0; /* 内边距0 */list-style: none; /* 无列表样式 */width: 1.7%; /* 宽度1.7% */position: fixed; /* 固定定位 */height: 2%; /* 高度2% */top: 16%; /* 距顶部16% */font-family: 'Century Gothic'; /* 字体 */box-shadow: 0px 0px 25px #00000070; /* 阴影 */clear: both; /* 清除浮动 */display: table; /* 表格布局 */
}/* 设置菜单列表项样式 */
ul.menu .list {display: table-cell; /* 表格单元格 */width: 2em; /* 宽度2em */height: 7em; /* 高度7em */text-align: center; /* 文本居中 */vertical-align: middle; /* 垂直居中 */float: left; /* 左浮动 */background: #1c48a5; /* 背景颜色 */clear: both; /* 清除浮动 */margin-top: 2px; /* 上边距2px */border-bottom: 1px solid #1c48a5; /* 底部边框 */
}/* 设置菜单列表项链接样式 */
ul.menu .list a {text-decoration: none; /* 无下划线 */-webkit-writing-mode: vertical-r; /* Webkit垂直书写模式 */writing-mode: vertical-rl; /* 垂直书写模式 */font-size: 1em; /* 字体大小 */height: 7em; /* 高度7em */color: #fff; /* 文本颜色 */line-height: 1.2em; /* 行高 */word-spacing: 1.5em; /* 单词间距 */letter-spacing: 0.3em; /* 字母间距 */word-break: break-all; /* 允许单词内断行 */cursor: pointer; /* 鼠标指针样式 */
}/* 设置菜单列表项激活状态样式 */
ul.menu .active {background-color: #0d78cc; /* 背景颜色 */color: #09fbd2; /* 文本颜色 */
}/* 设置图标样式 */
.icon {width: 1%; /* 宽度1% */height: 8%; /* 高度8% */position: fixed; /* 固定定位 */top: 46%; /* 距顶部*/
}
</style>

2.main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App'
import element from 'element-ui' 
import router from './router'
import  VueRouter from 'vue-router'
Vue.use(VueRouter)  //使用vue-router
Vue.use(element)
import axios from 'axios'
Vue.prototype.axios = axios;Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({el: '#app',  //为vue组件提供挂载元素。挂载元素的名字叫做“app”，即首页里的名字叫做app的那个divrouter,components: { App },   //组件的名字叫做App.vuetemplate: '<App/>'   //App.vue组件中的模版内容会替换挂载元素中的内容
})

3.index.js

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'Vue.use(Router)import DataScreen from '@/components/DataScreen'
import DataStatistics from '@/components/DataStatistics'
import RealTimeMonitoring from '@/components/RealTimeMonitoring'
import UserManagement from '@/components/UserManagement'
import VehicleManagement from '@/components/VehicleManagement'
import Salesdata from '@/components/Salesdata'
import Salesdetails from '@/components/Salesdetails'
import Saleslists from '@/components/Saleslists'
import Vehiclemonitoring from '@/components/VehicleMonitoring'
import Fleetdata from '@/components/Fleetdata'
import VehicleProfile from '@/components/VehicleProfile'// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
export default new Router({routes: [{ path: '/', name:DataScreen, component:DataScreen},{ path: '/Datascreen',name:DataScreen, component: DataScreen },{ path: '/Datastatistics',name:DataStatistics, component: DataStatistics },{ path: '/Realtimemonitoring',name:RealTimeMonitoring, component: RealTimeMonitoring },{ path: '/Usermanagement',name:UserManagement, component: UserManagement },{ path: '/Vehiclemanagement',name:VehicleManagement, component: VehicleManagement },{ path: '/Salesdata', name:Salesdata, component: Salesdata },{ path: '/Salesdetails', name:Salesdetails, component: Salesdetails },{ path: '/Saleslists', name:Saleslists, component: Saleslists },{ path: '/Vehiclemonitoring', name:Vehiclemonitoring, component: Vehiclemonitoring },{ path: '/Fleetdata', name:Fleetdata, component: Fleetdata },{ path: '/VehicleProfile', name:VehicleProfile, component: VehicleProfile }]
})

4.VehicleManagement.vue

<template><div id="app-content">    <div class="containerBox"><div style="padding: 38px 0 30px 20px;" class="ba"><div class="searchInputBox"><div class="inputItem pr"><p class="searchName">车载终端编号</p><br><el-input size="small" v-model="basicInput" class="searchDate.CarVIN"></el-input></div><div class="inputItem pr">  <!-- 选择框 按钮--><p class="searchName">车牌号</p><br><el-input size="small" v-model="basicInput" class="searchDate.CarNumber"></el-input></div><div class="inputItem pr"><p class="searchName">车辆状态</p><br><el-select  size="small" placeholder="请选择" v-model="basicInput" class="searchDate.Status"><el-option  value="all" label="全部"></el-option><el-option  value="true" label="启用"></el-option><el-option  value="false" label="禁用"></el-option></el-select></div><div class="inputItem buttonItem"><el-button type="primary" class="basicBtn basicBlueBtn">查询</el-button></div></div></div> <div class="vehicleInfo"><el-button size="small" @click="dialogFormVisible=true">新增车辆</el-button> <el-dialog id="Dialog" title="新增车辆" :visible.sync="dialogFormVisible" :modal="false" width="70%"> <el-form :model="form" class="Form" :rules="rules"><el-col :span="8"><div class="grid-content"><el-form-item label="车载终端编号" :label-width="formLabelWidth" prop="CarVIN"><el-input v-model="form.CarVIN" autocomplete="off"></el-input></el-form-item><el-form-item label="所属车队" :label-width="formLabelWidth" prop="Carline"><el-select v-model="form.Carline" placeholder="请选择所属车队"><el-option label="车队1" value="che1"></el-option><el-option label="车队2" value="che2"></el-option></el-select></el-form-item> <el-form-item label="车辆状态" :label-width="formLabelWidth" prop="Status"><el-select v-model="form.Status" placeholder="请选择车辆状态"><el-option label="启用" value="true"></el-option><el-option label="禁用" value="false"></el-option></el-select></el-form-item> <el-form-item label="车辆型号" :label-width="formLabelWidth" prop="vehicleType"><el-input v-model="form.vehicleType" autocomplete="off"></el-input></el-form-item><el-form-item label="电机品牌" :label-width="formLabelWidth" prop="motorBrand"><el-input v-model="form.motorBrand" autocomplete="off"></el-input></el-form-item><el-form-item label="电池型号" :label-width="formLabelWidth" prop="batteryType"><el-input v-model="form.batteryType" autocomplete="off"></el-input></el-form-item><el-form-item label="整车控制器序列号" :label-width="formLabelWidth" prop="veConNo"> <el-input v-model="form.veConNo" autocomplete="off"></el-input></el-form-item><el-form-item label="储能系统" :label-width="formLabelWidth" prop="energyStorage"><el-input v-model="form.energyStorage" autocomplete="off"></el-input></el-form-item></div></el-col><el-col :span="8" ><div class="grid-content"><el-form-item label="车牌号" :label-width="formLabelWidth" prop="CarNumber"><el-input v-model="form.CarNumber" autocomplete="off"></el-input></el-form-item><el-form-item label="当前里程数（km）" :label-width="formLabelWidth" prop="CurrKm"><el-input v-model="form.CurrKm" autocomplete="off"></el-input></el-form-item><el-form-item label="SIM卡ICCID编号" :label-width="formLabelWidth" prop="SIMIccid"><el-input v-model="form.SIMIccid" autocomplete="off"></el-input></el-form-item><el-form-item label="发动机品牌" :label-width="formLabelWidth" prop="engineBrand"><el-input v-model="form.engineBrand" autocomplete="off"></el-input></el-form-item><el-form-item label="电机型号" :label-width="formLabelWidth" prop="motorType"><el-input v-model="form.motorType" autocomplete="off"></el-input></el-form-item><el-form-item label="整车控制器品牌" :label-width="formLabelWidth" prop="veConBrand"><el-input v-model="form.veConBrand" autocomplete="off"></el-input></el-form-item><el-form-item label="整车控制器软件版本" :label-width="formLabelWidth" prop="veConsoftVersion"><el-input v-model="form.veConsoftVersion" autocomplete="off"></el-input></el-form-item><el-form-item label="车辆序列号" :label-width="formLabelWidth" prop="vehicleNo"><el-input v-model="form.vehicleNo" autocomplete="off"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content"><el-form-item label="所属公司" :label-width="formLabelWidth" prop="Company"><el-select v-model="form.Company" placeholder="请选择所属公司"><el-option label="海格车企1" value="hai1"></el-option><el-option label="海格车企2" value="hai2"></el-option></el-select></el-form-item>  <el-form-item label="出厂日期" :label-width="formLabelWidth" prop="OutComData"><el-date-picker v-model="form.OutComData" type="date" placeholder="选择日期"></el-date-picker></el-form-item> <el-form-item label="车辆品牌" :label-width="formLabelWidth" prop="vehicleBrand"><el-input v-model="form.vehicleBrand" autocomplete="off"></el-input></el-form-item>  <el-form-item label="发动机型号" :label-width="formLabelWidth" prop="engineType"><el-input v-model="form.engineType" autocomplete="off"></el-input></el-form-item><el-form-item label="电池品牌" :label-width="formLabelWidth" prop="batteryBrand"><el-input v-model="form.batteryBrand" autocomplete="off"></el-input></el-form-item><el-form-item label="整车控制器型号" :label-width="formLabelWidth" prop="veConType"><el-input v-model="form.veConType" autocomplete="off"></el-input></el-form-item><el-form-item label="整车控制器硬件版本" :label-width="formLabelWidth" prop="veConHardVersion"><el-input v-model="form.veConHardVersion" autocomplete="off"></el-input></el-form-item><el-form-item label="备注" :label-width="formLabelWidth" prop="remark"><el-input v-model="form.remark" autocomplete="off"></el-input></el-form-item></div></el-col></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div> <div class="ba"><div class="tabItem"><div class="tabItemConent" id="tabItemConent"><el-table id="tableBox" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)":header-cell-style="{background:'#0d2458',border:'none' }" :row-style="{background:'#193777'}" :cell-style="{border:'none'}"><el-table-column prop="index" label="序号" align="center"></el-table-column><el-table-column prop="CarVIN" label="车载终端编号"  align="center" width="220" ></el-table-column><el-table-column prop="CarNumber" label="车牌号"  align="center"></el-table-column><el-table-column prop="Company" label="运营公司"  align="center"></el-table-column><el-table-column prop="Carline" label="车队"  align="center"></el-table-column><el-table-column prop="OutComData" label="出厂日期"  align="center"></el-table-column><el-table-column prop="RegData" label="注册日期"  align="center"></el-table-column><el-table-column prop="CurrKm" label="当前里程数"  align="center"></el-table-column><el-table-column prop="BadCount" label="故障次数"  align="center"></el-table-column><el-table-column prop="Status" label="状态"  align="center"></el-table-column><el-table-column prop="caozuo" label="操作" align="center"><template slot-scope="scope"><span size="mini">编辑</span><span aria-setsize="mini" type="danger">删除</span></template></el-table-column></el-table></div><!-- 分页 --><div class="block"><el-pagination id="pag"backgroundlayout="prev,pager,next,total,sizes,jumper":total="tableData.length":current-page="currentPage":page-size="pageSize":page-sizes="[5,10,50,100]"@current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div><div class="block"></div></div></div></div></div>
</template><script>export default {data() {return {pagename: "车辆管理页面", // 页面标题searchDate:{             // 搜索条件CarVIN: '',       //车载终端编号CarNumber: '',Status: '',},tableData: [], // 车辆列表数据currentPage: "1", // 当前页码pageSize: "5", // 每页显示的条目数量dialogFormVisible: false,  //弹窗是否显示form: {   //定义车辆详细信息CarVIN:'',//车载终端编号CarNumber:'',//车牌号Company:'',//运营公司Carline:'',//车队CurrKm:'',//当前里程数OutComData:'',//出厂日期Status:'',//状态SIMIccid:'' , //SIM卡ICCID编号vehicleBrand:'' , //车辆品牌vehicleType:'', //车辆型号engineBrand:'',  //发动机品牌engineType:'',  //发动机型号            motorBrand:'',//电机品牌            motorType:'',// 电机型号            batteryBrand:'',// 电池品牌            batteryType:'',// 电池型号            veConBrand:'',// 整车控制器品牌            veConType:'',// 整车控制器型号            veConNo:'',// 整车控制器序列号            veConsoftVersion:'',// 整车控制器软件版本            veConHardVersion:'',// 整车控制器硬件版本            energyStorage:'',// 储能系统            vehicleNo:'',// 车辆序列号            remark:'',// 备注},formLabelWidth: '160px',rules:{   //定义规则，用于表单验证CarVIN:[{ required: true, message: '请输入车载终端编号', trigger: 'blur' },// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],CarNumber:[{ required: true, message: '请输入车牌号', trigger: 'blur' }],Company:[{ required: true, message: '请输入运营公司', trigger: 'blur' }],Carline:[{ required: true, message: '请选择车队', trigger: 'change' }],CurrKm:[{ required: true, message: '请输入当前里程数', trigger: 'blur' }],OutComData:[{ required: true, message: '请选择出厂日期', trigger: 'change' }],Status:[{ required: true, message: '请选择状态', trigger: 'change' }]}}},/*
在 Vue 应用中，我们有时需要在页面加载完成后再执行某些操作，比如获取数据、执行动画等等。Vue 提供了一些生命周期钩子函数来帮助我们实现这些需求。mounted 钩子函数是在组件挂载完成后调用的钩子函数。
我们可以在 mounted 钩子函数中执行一些 DOM 操作或者请求数据等操作。
*/
//定义钩子函数mounted,使用axios从carlist.json文件中获取车辆信息，存放到tableData中mounted() {// 使用axios从carlist.json文件中获取车辆信息，存放到tableData中this.axios('static/json/carlist.json').then(res => {this.tableData=res.data.carlist}).catch(err => {console.log(err)})},methods: {// 当前页发生改变时，执行该函数handleCurrentChange(currentPage){this.currentPage=currentPage;},// 每页条数发生改变时，执行该函数handleSizeChange(pageSize){this.pageSize=pageSize;}}
}
</script><style scoped>
</style>

5.UserManagement.vue

<template><div id="app-content">    <div class="containerBox"><div style="padding: 38px 0 30px 20px;" class="ba"><div class="searchInputBox"><div class="inputItem pr"><p class="searchName">用户名</p><br><el-input size="small" v-model="searchData.UserName" class="basicInput"></el-input></div><div class="inputItem pr">  <!-- 选择框 按钮--><p class="searchName">真实姓名</p><br><el-input size="small" v-model="searchData.RealName" class="basicInput"></el-input></div><div class="inputItem pr">  <p class="searchName">手机号</p><br><el-input size="small" v-model="searchData.Telephone" class="basicInput"></el-input></div><div class="inputItem pr"><p class="searchName">公司</p><br><el-select  size="small" placeholder="请选择" v-model="searchData.Company" class="basicInput"><el-option  value="all" label="True"></el-option><el-option  value="true" label="启用"></el-option></el-select></div><div class="inputItem pr"><p class="searchName">状态</p><br><el-select  size="small" placeholder="良好" v-model="searchData.State" class="basicInput"><el-option  value="all" label="True"></el-option><el-option  value="true" label="启用"></el-option></el-select></div><div class="inputItem pr"><p class="searchName">部门</p><br><el-select  size="small" placeholder="请选择" v-model="searchData.Dept" class="basicInput"><el-option  value="all" label="True"></el-option><el-option  value="true" label="启用"></el-option></el-select></div><div class="inputItem buttonItem"><el-button type="primary" class="basicBtn basicBlueBtn">查询</el-button></div></div></div> <div class="vehicleInfo"><el-button size="small" @click="dialogFormVisible=true">新增用户</el-button> <el-dialog id="Dialog" title="新增用户" :visible.sync="dialogFormVisible" :modal="false" width="45%"> <el-form :model="form" class="Form" :rules="rules" label-width="20%"> <!--表单 -->><el-form-item label="用户名" :label-width="formLabelWidth" prop="Username"><el-input v-model="form.UserName" placeholder="请输入用户名" autocomplete="off"></el-input></el-form-item><el-form-item label="密码" :label-width="formLabelWidth" prop="Password"><el-input v-model="form.Password" placeholder="请输入密码" autocomplete="off"></el-input></el-form-item><el-form-item label="请确认密码" :label-width="formLabelWidth" prop="Repassword"><el-input v-model="form.Repassword" placeholder="请确认密码" autocomplete="off"></el-input></el-form-item><el-form-item label="手机号码" :label-width="formLabelWidth" prop="Telephone"><el-input v-model="form.Telephone"placeholder="请输入手机号码" autocomplete="off"></el-input></el-form-item><el-form-item label="真实姓名" :label-width="formLabelWidth" prop="RealName"><el-input v-model="form.RealName" autocomplete="off"></el-input></el-form-item><el-form-item label="关联公司" :label-width="formLabelWidth" prop="Company"><el-select v-model="form.Company" placeholder="请选择关联公司"><el-option label="车队1" value="che1"></el-option><el-option label="车队2" value="che2"></el-option></el-select></el-form-item> <el-form-item label="关联部门" :label-width="formLabelWidth" prop="Dept"><el-select v-model="form.Dept" placeholder="请选择关联部门司"><el-option label="车队1" value="che1"></el-option><el-option label="车队2" value="che2"></el-option></el-select></el-form-item> </el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div> <div class="ba"><div class="tabItem"><div class="tabItemConent" id="tabItemConent"><el-table id="tableBox" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)":header-cell-style="{background:'#0d2458',border:'none' }" :row-style="{background:'#193777'}" :cell-style="{border:'none'}"><el-table-column prop="index" label="序号" align="center"></el-table-column><el-table-column prop="RealName" label="真实姓名"  align="center" width="220" ></el-table-column><el-table-column prop="UserName" label="用户名"  align="center"></el-table-column><el-table-column prop="Telephone" label="手机号码"  align="center"></el-table-column><el-table-column prop="Dept" label="部门"  align="center"></el-table-column><el-table-column prop="Company" label="运营公司"  align="center"></el-table-column><el-table-column prop="CarEnterprises" label="车企"  align="center"></el-table-column><el-table-column prop="Status" label="状态"  align="center"></el-table-column><el-table-column prop="CreateTime" label="创建时间"  align="center"></el-table-column><el-table-column prop="caozuo" label="操作" align="center"><template slot-scope="scope"><span size="mini">编辑 </span><span aria-setsize="mini" type="danger">删除</span></template></el-table-column></el-table></div><!-- 分页 --><div class="block"><el-pagination id="pag"backgroundlayout="prev,pager,next,total,sizes,jumper":total="tableData.length":current-page="currentPage":page-size="pageSize":page-sizes="[5,10,50,100]"@current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div><div class="block"></div></div></div></div></div></template><script>export default {data() {return {pagename: "用户管理", // 页面标题searchData:{         //查询数据UserName:"", //用户姓名RealName:"", //真实姓名Telephone:"", //电话Company:"", //公司名称State:"", //状态Dept:"", //部门},tableData: [], // 车辆列表数据currentPage: "1", // 当前页码pageSize: "5", // 每页显示的条目数量dialogFormVisible: false,  //弹窗是否显示form:{UserName:"",Password:"",RePassword:"",Telephone:"",RealName:"",Company:"",Dept:""},rules:{    //定义规则，用于表单验证UserName:[{ required: true, message: "请输入用户名", trigger: "blur"},{ pattern: /^[a-zA-Z0-9]{6,16}$/, message:'用户名格式错误', trigger: "blur"}],Password:[{ required: true, message: "请输入密码",trigger: "blur"},{ pattern: /[a-zA-Z\d+]{6,16}/, message:'密码格式错误',trigger:'blur'}],RePassword:[{ required: true, message: "请输入确认密码", trigger: "blur"},],Telephone:[{ required: true, message: "请输入电话号码", trigger: "blur"},{ pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "电话号码格式错误", trigger: "blur"}],RealName:[{ required: true, message: "请输入真实姓名", trigger: "blur"},{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,16}$/, message: "真实姓名格式错误", trigger: "blur"}],Company:[{ required: true, message: '请选择关联运营公司', trigger: 'change' },],Dept:[{ required: true, message: '请选择关联部门', trigger: 'change' },]}}},/*在 Vue 应用中，我们有时需要在页面加载完成后再执行某些操作，比如获取数据、执行动画等等。Vue 提供了一些生命周期钩子函数来帮助我们实现这些需求。mounted 钩子函数是在组件挂载完成后调用的钩子函数。我们可以在 mounted 钩子函数中执行一些 DOM 操作或者请求数据等操作。*///定义钩子函数mounted,使用axios从carlist.json文件中获取车辆信息，存放到tableData中mounted() {// 使用axios从carlist.json文件中获取车辆信息，存放到tableData中this.axios('static/json/userlist.json').then(res => {this.tableData=res.data.userlist}).catch(err => {console.log(err)})},methods: {// 当前页发生改变时，执行该函数handleCurrentChange(currentPage){this.currentPage=currentPage;},// 每页条数发生改变时，执行该函数handleSizeChange(pageSize){this.pageSize=pageSize;}}}</script><style scoped></style>

二.项目运行截图