一、el-form
- 调用
resetField()方法时表单项不会重置为初始值。
需要为el-form-item设置prop，只有设置了该属性的表单项才会重置。
二、el-table
-
el-table-column中添加el-input，但不能输入。
<el-table-column property="a" label="a">
<el-input placeholder="请输入"></el-input>
</el-table-column>
需要给el-input绑定列表每行数据对象的字段
<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中弹出的组件绑定属性，属性值与父组件的值仍有联系。
最好复制属性的值以切断与父组件的联系，可使用JSON.parse(JSON.stringify(val))复制对象。
watch: {
data: {
immediate: true,
deep: true,
handler: function(val) {
let form = JSON.parse(JSON.stringify(val))
this.form = form
}
},
},
-
el-dialog关闭后下次进入后仍会显示之前的数据。
应该将组件绑定的属性值置空，下次进入时就不会显示之前的数据。
通常在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>
经查询，el-dialog中必须是一个组件，:destroy-on-close="true"才会销毁组件。
<el-dialog title="" :visible.sync="show" :destroy-on-close="true">
<custom></custom>
</el-dialog>
但有个问题，当el-dialog关闭后，组件会自动销毁，但也会立即重新创建组件，会直接触发组件的生命周期方法created与mounted，不知道为何这样设计。
可使用v-if或绑定动态的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打开时，组件才会新建，才会触发created与mounted。
