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-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)
    })