1.雙向綁定也不是所有的屬性都是需要的旭旭，首先前端分兩個(gè)大類，一個(gè)展示數(shù)據(jù)葱跋，一個(gè)錄入數(shù)據(jù)持寄；
那么展示數(shù)據(jù)的那部分，雙向綁定就不需要年局，而我一開始鉆進(jìn)去寫前端的時(shí)候呢际看，從復(fù)制粘貼一路下來，寫了很多的無用代碼矢否，且浪費(fèi)時(shí)間仲闽，有必要雙向綁定的，狀態(tài)判斷僵朗，監(jiān)聽事件的屬性等等赖欣；
那么錄入數(shù)據(jù)的部分呢，有必要雙向綁定的數(shù)據(jù)验庙，下拉框select 顶吮，單選框lable 等需要設(shè)置默認(rèn)值的屬性，鑒于屬性太多且雜粪薛，可以直接把錄入的數(shù)據(jù)都做成雙向綁定悴了，優(yōu)點(diǎn)是所有的值都有默認(rèn)值，不用擔(dān)心后續(xù)的問題，缺點(diǎn)是屬性太多湃交，浪費(fèi)時(shí)間熟空。這個(gè)頁面就是寫了整整一頁的屬性，錄入東西太多搞莺。
image.png
2.緩存
官方文檔給出息罗，在設(shè)置路由的時(shí)候給值 noCache: true if true, the page will no be cached(default is false) 離開路由的時(shí)候清空緩存
/* Router Modules */
// import componentsRouter from './modules/components'
// import chartsRouter from './modules/charts'
// import tableRouter from './modules/table'
// import nestedRouter from './modules/nested'
/** note: Submenu only appear when children.length>=1
* detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
**/
/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] will control the page roles (you can set multiple roles)
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
noCache: true if true, the page will no be cached(default is false)
breadcrumb: false if false, the item will hidden in breadcrumb(default is true)
}
**/
image.png
- 頁面跳轉(zhuǎn)-url傳值
如果只有很少的部分可以用url后接?xxx 方式去傳值，而要傳json數(shù)據(jù)的話最好不要才沧，若json數(shù)據(jù)太多迈喉，url傳值會(huì)出現(xiàn)莫名的問題，改session存儲(chǔ)接收的方式温圆。
handleUpdate(row) {
row = escape(JSON.stringify(row));
this.$router.push({
path: "/estate/addestate",
query: { row, row }
});
},
created() {
if (this.$route.query.row) {
var row = JSON.parse(unescape(this.$route.query.row))
this.temp = Object.assign(this.temp, row)
}
},
sessionStorage.setItem('row', JSON.stringify(row))
//在另一個(gè)頁面定義一個(gè)變量去接收挨摸，之后并清除session
const rows = JSON.parse(sessionStorage.getItem('row'))
sessionStorage.removeItem('row')
4.json解析問題
- 樣式問題
這個(gè)問題是在vue框架下設(shè)置了多級菜單后，對table標(biāo)簽下設(shè)置了寬度捌木，因?yàn)閠able標(biāo)簽下顯示的列太多油坝，設(shè)置width：100%沒有效果嫉戚，如果直接把width：1000px寫死的話刨裆，不同分辨率顯示的樣式不一致，后來是這么解決的彬檀，獲取瀏覽器當(dāng)前的寬度帆啃，再把當(dāng)前的寬度賦值給width。
<el-table :style="myWidth " >
myWidth: {width: document.body.scrollWidth + 'px'},
