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)
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/282323.html
標籤：其他
上一篇：仿拼多多地址選擇器