Vue 常见问题

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-table
          v-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 = true
        if(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)
    })

四、数组、对象判空问题

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  ”项目名称“

六、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 i18n

Vue.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

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

一、项目入口文件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

九、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>

结果：

十、页面跳转传参

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

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

item为参数

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

接受参数：

  mounted() {
      console.log(this.$route.params);
  },