一院溺、el-form
- 調(diào)用
resetField()方法時表單項不會重置為初始值。
需要為el-form-item設(shè)置prop够挂，只有設(shè)置了該屬性的表單項才會重置。
二贷掖、el-table
-
el-table-column中添加el-input嫡秕，但不能輸入。
<el-table-column property="a" label="a">
<el-input placeholder="請輸入"></el-input>
</el-table-column>
需要給el-input綁定列表每行數(shù)據(jù)對象的字段
<el-table-column property="a" label="a" #default="scope">
<el-input placeholder="請輸入" v-model="scope.row.a"></el-input>
</el-table-column>
- 隱藏多選時的全選按鈕
<el-table :data="listDatas" :header-cell-class-name="headerCellClassName">
<el-table-column type="selection"></el-table-column>
</el-table>
headerCellClassName: function(row) {
// 第0列時為全選框
if (row.columnIndex == 0) {
return "hideSelection"
}
}
// 使用display: none來隱藏全選框 /deep/是必須的
/deep/.hideSelection .el-checkbox {
display: none;
}
三苹威、el-dialog
- 為
el-dialog中彈出的組件綁定屬性昆咽，屬性值與父組件的值仍有聯(lián)系。
最好復(fù)制屬性的值以切斷與父組件的聯(lián)系牙甫，可使用JSON.parse(JSON.stringify(val))復(fù)制對象掷酗。
watch: {
data: {
immediate: true,
deep: true,
handler: function(val) {
let form = JSON.parse(JSON.stringify(val))
this.form = form
}
},
},
-
el-dialog關(guān)閉后下次進入后仍會顯示之前的數(shù)據(jù)。
應(yīng)該將組件綁定的屬性值置空窟哺，下次進入時就不會顯示之前的數(shù)據(jù)泻轰。
通常在close方法中置空。
<el-dialog title="" :visible.sync="show" @close="closeAction">
<custom :data="data"></custom>
</el-dialog>
closeAction: function() {
this.data = {}
}
-
destroy-on-close屬性為true時并不會銷毀元素且轨。
<el-dialog title="" :visible.sync="show" :destroy-on-close="true">
<div>
<input></input>
</div>
</el-dialog>
經(jīng)查詢浮声，el-dialog中必須是一個組件，:destroy-on-close="true"才會銷毀組件旋奢。
<el-dialog title="" :visible.sync="show" :destroy-on-close="true">
<custom></custom>
</el-dialog>
但有個問題泳挥，當el-dialog關(guān)閉后，組件會自動銷毀至朗，但也會立即重新創(chuàng)建組件屉符，會直接觸發(fā)組件的生命周期方法created與mounted，不知道為何這樣設(shè)計锹引。
可使用v-if或綁定動態(tài)的key矗钟，就能解決這個問題。
<el-dialog title="" :visible.sync="show" v-if="show">
<custom></custom>
</el-dialog>
<el-dialog title="" :visible.sync="show" :key="key">
<custom></custom>
</el-dialog>
此時當el-dialog打開時粤蝎，組件才會新建真仲，才會觸發(fā)created與mounted袋马。
