1. /deep/ 無法使用 換成::v-deep 注意/deep/后面跟空格(記得scoped) 2. 在iview中使用input組件時 官方提供的是< /Input>但是報錯,改成< i-input/> 3. 組件命名用AxxBxx這種，路由路徑用小寫，名字用AxxBxx，類名用小寫加中劃線 4. 循環對象，刪除為空的屬性 ~~~ // 刪除對象中的空字段 Object.keys(tempData).forEach(function(key) { tempData[key] ? "": delete tempData[key]; }); ~~~ 5 使用rem設置表格高度超出高度出現滾動條 ~~~ .tableStyle { /deep/ .ivu-table-body { height: 22.3rem; width: 100%; } } ~~~ 滾動條樣式調整 ~~~ /* 滾動條 */ /deep/ .ivu-table-overflowX::-webkit-scrollbar, /deep/ .ivu-table-overflowY::-webkit-scrollbar { height: 0.5rem; } 　 1、.test::-webkit-scrollbar 定義了滾動條整體的樣式； 2、.test::-webkit-scrollbar-thumb 滑塊部分； 　 3、.test::-webkit-scrollbar-thumb 軌道部分； ~~~ 6 .時間戳轉日期，null也會被轉 7.將ui庫中的組件適配，給class將px轉rem覆蓋 ### 8.表格數據轉map在轉obj 獲取dom節點取元素使用 對象的遍歷方式 ~~~ // 新建項目信息填寫 保存和取消 async saveBtn() { // 獲取表單數據（此處是獲取不到的，在服務器上才能獲取到。跨域問題） const iframeData = { attrs: {}, name: "" }; const iframeDom1 = document.getElementsByName("iframeName"); // console.log("iframeDom1", iframeDom1); const fromElements = document .getElementsByName("iframeName")[0] .contentWindow.document.getElementsByName("dfmReport")[0]; // console.log("fromElements", fromElements); const maps = new Map(); for (let i = 0; i < fromElements.length; i++) { const e = fromElements[i]; if (e.type === "hidden" && e.name) { // console.log( e.name, e.value); if (e.name === "name") { iframeData.name = e.value; } else { // 數據轉map e.value && maps.set(e.name, e.value); } } } maps.set("gcbh", this.gcbh); // map 轉對象 const attrs = {}; for (const [k, v] of maps) { attrs[k] = v; } iframeData.attrs = attrs; console.log("iframeData is", iframeData); try { if (this.xmbh) { await modifySubject(this.type, this.xmbh, iframeData); } else { await addSubject(this.type, iframeData); } this.$Message.success({ content: "保存項目成功！", duration: 3 }); this.$emit("onok"); } catch (error) { console.log(error); } // this.$Message.info("Clicked ok"); }, ~~~ 多個空格實現方式 a.toFixed(2) a為數字保留兩位小數 **改用@click.native=""綁定事件。**（彈出框回車事件餓了么的，iview的下拉選框選項點擊無效） ### 表格寬度設置為rem ~~~ /deep/ .ivu-table-body, /deep/ .ivu-table-header { colgroup col { &:nth-child(1) { width: 2.5rem !important; } }} ~~~ ### iview中自定義表格 ~~~ 1. 表頭數據是個數組 2. 每一項的數據對象格式為 3. 有children相當于拆分單元格 { title: "項目信息列表", align: "center", children: [ { title: "序號", key: "number", align: "center" },} ~~~ 布局時靈活使用百分比和rem（盡量避免百分百和rem混用）， 多使用sass語法，（定義顏色常量，和代碼塊，使用include語法引入） 不濫用 /deep/ （深度選擇器，在存在父子組件的情況下使用，在使用的里面無需在使用/deep/會默認繼承，但在火狐瀏覽器失效） 靈活&的使用（在sass中是代替重復的選擇器） ### css3 計算屬性 calc() 注意事項： * 使用“+”、“-”、“\*” 和 “/”四則運算； * 可以使用百分比、px、em、rem等單位； * 可以混合使用各種單位進行計算； * 表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的； * 表達式中有“\*”和“/”時，其前后可以沒有空格，但建議留有空格。 ### 選擇父元素下的第一個子元素 ~~~ ul>:first-child ~~~ ### 布局： ~~~ 布局是情況下，上下布局也可以使用flex布局，向上下盒子高度自適應的情況，flex-grow: 1; ~~~