当前位置： 代码迷 >> 综合 >> Vue 常见问题
  详细解决方案

Vue 常见问题

热度：87   发布时间：2023-12-13 22:57:08.0

文章目录

  • Vue 常见问题
    • 一、el-select数据回显问题
    • 二、el-table expend抽屉展开
    • 三、vue跨域问题
      • （1）配置文件config>index.js
      • （2）配置文件config>dev.env.js
      • （3）配置文件config>prod.env.js
      • （4）写一个请求
    • 四、数组、对象判空问题
    • 五、vue创建新项目
    • 六、vue新项目中加入element
    • 七、搭建一个简单的后台管理页面
      • 一、项目入口文件
      • 二、添加路由
    • 八、修改elementui中messageBox样式（解决弹出框未居中问题）
    • 九、vue-qrcode二维码生成
    • 十、页面跳转传参

Vue 常见问题

一、el-select数据回显问题

参考文章：https://blog.csdn.net/fyydashen/article/details/109361172

<el-form-item label="性别"><el-select v-model="form.contact_genger" placeholder="选择您的性别"><el-option label="男" :value="0" :key="0"/><el-option label="女" :value="1" :key="1"/></el-select>
</el-form-item>

二、el-table expend抽屉展开

<div class="table"><el-tablev-loading="listLoading":data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"element-loading-text="Loading"style="width: 100%;height:100%;"height="100%":header-cell-style="{ background: '#f5f7fa', color: '#606266' }"size="small"@expand-change = "handleExpandChange":expand-row-keys="currentExpandRow"><el-table-column type="expand"><template slot-scope="scope"><div v-loading="expandTableLoding"><el-form label-position="left" label-width="90px" class="table-expand"><el-form-item v-for="(item, key, index) in expandTableRow[0]" :key="index" :label="key"><span>{
   {item || "暂无数据"}}</span></el-form-item></el-form></div></template></el-table-column></div>

expandTableRow: [], // 详情展开显示
currentExpandRow: [],
expandTableLoding: true,

// 异步请求用户详情async handleExpandChange(row, expandedRows){
    this.expandTableLoding = trueif(expandedRows.length > 0){
    console.log(row.id);if(this.expandTableRow.hasOwnProperty(row.id)){
    return false;};          await getAgentInfo(row.id).then(res=>{
    // TODO.. 以索引的形式更新数组，vue视图并不能检测响应，需要通过$set方法去更新this.$set(this.expandTableRow, 0, res.data);// this.expandTableRow = res.data;// console.log(res.data); })}this.expandTableLoding = false},

三、vue跨域问题

（1）配置文件config>index.js

找到proxyTable，添加

proxyTable: {
    '/api':{
                                    // 要代理的接口名target:'http://super.ail***n.com/',   // 要代理的接口地址changeOrigin:true,                            // 允许跨域pathRewrite:{
    '^/api':'/api'}            // 接口名重写}},

（2）配置文件config>dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',API_ROOT:'"/api/"'  //<<<<<<<<
})

（3）配置文件config>prod.env.js

'use strict'
module.exports = {
    NODE_ENV: '"production"',API_ROOT:'"http://super.ai***hn.com/"'
}

（4）写一个请求

axios.get('api/admin/custom/list?type=2').then(res=>{
    console.log(res)}).catch(err=>{
    console.log(err)})

image-20210429204937184

四、数组、对象判空问题

1. 一个讨巧判断空数组、空对象的方法：

Copyvar item = [];
console.log(JSON.stringify(item) === '[]');  // => true
Copyvar item = {
    };
console.log(JSON.stringify(item) === '{}'); // => true

2. null, undefined, {}, [],"" , 0在非严格等于（即两个等号时==）情况下，他们互有“帮派”。

  • null, undefined为一组。
Copynull == undefined  // => true
  • [], "" , 0为一组。
Copyconsole.log("" == 0);  	// => true
console.log("" == []);  // => true
console.log(0  == []);  // => true/*但不要混淆，空数组不等于空数组但不要混淆，空数组不等于空数组 */ 
[] == [] 	// => false
{
    } == {
    }	// => false

所以在做判断的时候，严谨点要用严格等于===。

五、vue创建新项目

1.第一步：安装vue-cli

npm install vue-cli -g

2.项目名为tools新建vue项目

vue init webpack  ”项目名称“

image-20210507142417355

六、vue新项目中加入element

先安装


cnpm i element-ui -S

全局引入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 Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18nVue.config.productionTip = false
Vue.use(ElementUI, {
     locale })
/* eslint-disable no-new */
new Vue({
    el: '#app',router,components: {
     App },template: '<App/>'
})

在页面中加入元素测试HelloWorld.vue

<template><div class="hello"><el-button type="primary" icon="el-icon-search">搜索</el-button></div>
</template>

运行项目

npm run dev

image-20210507145441785

七、搭建一个简单的后台管理页面

image-20210507153611774

一、项目入口文件

从官网复制一个模板，在这个基础上修改，将代码放入项目入口文件中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxItdf4u-1620479765528)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20210507153343838.png)]


<template><el-container style="height: 700px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1" @click="h1">选项1</el-menu-item><el-menu-item index="1-2" @click="h2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><!-- 路由显示 --><router-view/> </el-main></el-container></el-container>
</template><script>export default {
    data() {
    },methods: {
    h1(){
    this.$router.push({
     path: '/' })},h2(){
    this.$router.push({
     path: '/h1' })},},};
</script>
<style>.el-header {
    background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {
    color: #333;}
</style>

将此部分原来的代码删除，在里面加一个路由显示的区域，选项1点击跳转到主页，选项2点击跳转的页面2。

页面1，页面2的内容随便写，但是要注意name

二、添加路由

router>index.js中添加路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
// import "component的name" from '@/components/文件名'
Vue.use(Router)export default new Router({
    routes: [{
    path: '/',name: 'HelloWorld',component: HelloWorld},{
    path: '/h1',name: 'HelloWorld2',component: HelloWorld2}]
})

八、修改elementui中messageBox样式（解决弹出框未居中问题）

this.$confirm(msg, {
    customClass: 'message-logout', //给弹出框定义一个类名confirmButtonText: '确定',type: dialogType
});

// 再添加一个样式
<style>
.message-logout {
    width: 80vw;background-color: #191828;}
.message-logout  .el-message-box__content{
    color: white;
}
</style>

image-20210508204541516

九、vue-qrcode二维码生成

下载：

npm install --save vue-qrcode

引入:

import QRCode from 'vue-qrcode'; //引入生成二维码插件

使用:

<template><div class="qr_container"><el-col><el-row><span>在使用时间向商家初始此券</span></el-row><el-row><qrcode :value="`https://www.ccmapp.cn/pages/test-share/apps/page/seminar/seminar-list/seminar-list.html?id=123&from=singlemessage`" :options="{ size: 100 }" ></qrcode></el-row><el-row><h3>{
    {
    couponInfo.item.date}}</h3>   // 删除</el-row></el-col>        </div></template>

结果：

image-20210510205522792

十、页面跳转传参

这里注意name是你页面的名字：

{
    path: '/qrcodepage',name: 'QrcodePage',component: QrcodePage
}

item为参数

this.$router.push({
    name:'QrcodePage', params: {
    item}});

接受参数：

  mounted() {
    console.log(this.$route.params);},
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.