一 / 使用確認組件時候
this.$confirm('確認移除', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteFn("removeGroup",row);
}).catch((error) => {
console.log(error)
});;
點擊了確定，沒有執行刪除的方法，
經排查，原來 不僅進入了then中，還進行了catch中，說明，在then中有報錯，
打印錯誤定位，找到錯誤，更改后就好了
二 使用分頁切換的時候，點擊搜索之后，頁碼回到了第一頁， 我想要的效果是搜索的時候，在哪頁就是哪頁，不進行跳轉回第一頁
<el-pagination @size-change="changePageSizeFn" class="f-r" @current-change="changePageFn" :pager-count="5" :current-page.sync="pageOption.currPage" :page-sizes="pageOption.defaultpagesizes" :page-size="pageOption.defaultpagesize" layout="sizes, prev, pager, next, jumper" :total="tableOptions.total"> </el-pagination>
手動計算了當前的頁碼，對 pageOption.currPage 進行了賦值，發現依然回到第一頁，
排查之后發現，兩點
1）需要 :current-page.sync 必須寫sync
2）需要將pageOption.currPage = 4 這個賦值，放在請求到表格數據之后
三、關於element-ui的表格，在不同的tab，來回切換的時候，不同tab下的表格會出現錯位的情況
解決方法：1）官網上給了一個方法doLayout ，this.$refs.table.doLayout();
剛開始我的不知道為什么，提示報錯doLayout不是一個函數，但是這個this.$refs.table 確實是拿到這個表格的dom元素，后來發現因為我的這個表格是封裝的一個組件，我是直接在組件上寫了ref=table，所以沒有起作用，大家
可以試一下在el-table上加ref，估計會起作用；
2）由於我第一次嘗試doLayout不起作用，我就找了第二種方法，在切換的時候，給table組件身上加一個v-if，就解決了
三、關於element-ui的 文本域的問題
問題描述：在一個彈框中的三個步驟中，每個步驟中都一個各自的form表單，每個表單中都有一個input（type=‘textarea’）；我發現我在第二個步驟中改變input的大小的時候，會影響到第三步驟中的input的大小；毫無關聯的兩個input怎么會將高度 關聯起來呢？
原因：經過一段時間，發現了 原因，平常我們的label都是一個常量，比如：label=“我是一個label”； 這樣的話，就算每個lable都是這個名稱也不會有影響；
我的項目中需要有中英文切換，所以label是這樣寫的
:label="$t('strategyCenter.args')" ，（第二個步驟中）
好巧的是，
第三步驟中的那個input的label也是 用這個名稱 所以第三步中的label :label="$t('strategyCenter.args')"；
導致兩個沒有關系的input產生了關聯；
解決：在中英文的文件中，再定義一個名稱的變量，兩個分開用就好了
四、關於element-ui的 radio的回顯切換不生效的問題
問題描述：在編輯表單的時候，radio切換不生效
原因：因為這個radio是后來新加上的，但是原先的列表的數據中沒有這個代表radio的字段；新增的是可以切換的，但是對原來的數據，編輯的時候，不生效
解決：在拿到要回顯的數據data之后，先對數據增加改字段，然后對data進行深克隆；接着將data賦值給form
如：data - 在我點擊當前列的編輯操作時獲取到當前列的數據 returnForm.aa是radio v-model綁定的值
此時新增的字段是aa；但是data中沒有aa這個字段；手動添加data.aa = data.aa||"";
this.returnForm = JSON.parse(JSON.stringify(data));
這樣就可以解決了
五、關於element-ui的 列合並
問題描述：在element-ui的table示例中，對table的合並單元格是固定的就第一行，兩兩合並，只能兩兩合並，實際項目中的需求是根據數據進行合並，我的原數據結構是，如下，同一數據源進行合並
data = [ { source:"aa", fields:"aa_1", rules:[ {fields:"aa_1"}, {fields:"aa_2"}, {fields:"aa_3",} ] }, { source:"aa", fields:"aa_2", rules:[ {field:"aa_1"}, {field:"aa_2"}, {field:"aa_3",} ] }, { source:"aa", fields:"aa_3", rules:[ {field:"aa_1"}, {field:"aa_2"}, {field:"aa_3",} ] }, { source:"bb", fields:"bb_1", rules:[ {field:"bb_1"} ] } ]
要對數據進行處理
data.forEach(item=>{ if(item.rule.length){ item.rule.forEach((irm,irx)=>{ if(irm.field == item.fields){ item.ruleindex = irx; } }); }else{ item.ruleindex = 0; }; });
每次更換數據源的時候，ruleindex 從0開始
data = [
{
source:"aa", fields:"aa_1",
ruleindex:0, rules:[ {fields:"aa_1"}, {fields:"aa_2"}, {fields:"aa_3",} ] }, { source:"aa", fields:"aa_2",
ruleindex:1, rules:[ {field:"aa_1"}, {field:"aa_2"}, {field:"aa_3",} ] }, { source:"aa", fields:"aa_3",
ruleindex:2, rules:[ {field:"aa_1"}, {field:"aa_2"}, {field:"aa_3",} ] }, { source:"bb", fields:"bb_1",
ruleindex:0, rules:[ {field:"bb_1"} ] } ]
官網中的方法：
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //第一列 if (rowIndex % 2 === 0) { //每兩行 return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } }
項目中使用的方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) { let obj={}; let num = row.rule.length;//項目中要合並的列數 let rowNum = row.ruleindex; //給每一條數據都加一個標識索引 let spanLists =[0,4,7]; //要合並的列的索引集合 if (spanLists.includes(columnIndex)) { if (rowNum % num == 0) { //被合並的單元格的起始行列位置 obj = { rowspan:num, colspan:num>0?1:0 }; } else { //其他被合並的行列都設置為0，意被隱藏 obj= { rowspan: 0, colspan: 0 }; }; return obj; } }
合並關鍵點是 被合並的單元格的起始單元格設置對應的行列合並即可，其他被合並的單元格應該將行列設置為0（隱藏這些單元格）
再來一個簡單的例子
customData:[ { name:"endView", type:"dia.ElementView", span:0, num:1, desc:`我們連接到的ElementView。元素模型可以通過endView.model訪問;這對於編寫基於元素屬性的條件邏輯可能很有用。`, }, { name:"endMagnet", type:"SVGElement", span:1, num:1, desc:`頁面中的SVGElement，它包含我們要連接到的磁鐵(元素/子元素/端口[element/subelement/port])。`, }, { name:"anchorReference", type:"g.Point", span:2, num:2, desc:`對鏈接路徑的另一個組件的引用，可能是找到這個錨點所必需的。如果我們為一個源錨調用這個方法，它是第一個頂點， 或者如果沒有頂點則是目標錨。如果我們為一個目標錨調用這個方法，它是最后一個頂點，或者如果沒有頂點源錨…`, }, { name:"anchorReference", type:"SVGElement", span:2, num:1, desc:`…如果所討論的錨不存在(還不存在)，它就是連接端的磁鐵。(內置方法通常使用該元素的中心點作為參考。)`, }, { name:"args", type:"object", span:4, num:1, desc:`一個對象，它帶有附加的可選參數，用戶在調用它時將其傳遞給錨定方法(args屬性)。`, }, ],
上方例子中，數據是固定的，需求是合並第一列的第三和第四行，
我可以直接寫，第二行 rowspan: 2,colspan: 1，第三行是行列都為0
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex == 2) { return { rowspan: 2, colspan: 1 }; }else if (rowIndex == 3) { return { rowspan: 0, colspan: 0 }; } } }
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (row.span == rowIndex) { return { rowspan: row.num, colspan: 1 }; }else { return { rowspan: 0, colspan: 0 }; } } }
六、關於element-ui 動態生成表單，表單中有select(創建條目)的操作，在編輯回顯的時候，賦值改該model為[]，但是提示一下報錯，但是實際情況卻是，這個v-model綁定的類型確實應該是一個數組
原因：由於是動態渲染的表單，所以，有可能是因為這個select還沒有渲染好，導致出現了該問題
解決問題 ： 在表單的form賦值的時候，加一個定時器，延遲賦值，等頁面渲染好再進行賦值
