element-ui使用问题

一、el-form

1. 调用resetField()方法时表单项不会重置为初始值。
   需要为el-form-item设置prop，只有设置了该属性的表单项才会重置。

二、el-table

1. el-table-column中添加el-input，但不能输入。

需要给el-input绑定列表每行数据对象的字段

2. 隐藏多选时的全选按钮

      


headerCellClassName: function(row) {
    // 第0列时为全选框
    if (row.columnIndex == 0) {
        return "hideSelection"
    }
}

// 使用display: none来隐藏全选框 /deep/是必须的
/deep/.hideSelection .el-checkbox {
    display: none;
}

三、el-dialog

1. 为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
                }
            },
        },

2. el-dialog关闭后下次进入后仍会显示之前的数据。
   应该将组件绑定的属性值置空，下次进入时就不会显示之前的数据。
   通常在close方法中置空。

  


closeAction: function() {
  this.data = {}
}

3. destroy-on-close属性为true时并不会销毁元素。

经查询，el-dialog中必须是一个组件，:destroy-on-close="true"才会销毁组件。

但有个问题，当el-dialog关闭后，组件会自动销毁，但也会立即重新创建组件，会直接触发组件的生命周期方法created与mounted，不知道为何这样设计。
可使用v-if或绑定动态的key，就能解决这个问题。

此时当el-dialog打开时，组件才会新建，才会触发created与mounted。