element-ui使用问题

一、el-form

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

二、el-table

1. 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>

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

<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

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方法中置空。

<el-dialog title="" :visible.sync="show" @close="closeAction">
  <custom :data="data"></custom>
</el-dialog>

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

3. 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。