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>
  1. 隐藏多选时的全选按钮
<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
                }
            },
        },
  1. el-dialog关闭后下次进入后仍会显示之前的数据。
    应该将组件绑定的属性值置空,下次进入时就不会显示之前的数据。
    通常在close方法中置空。
<el-dialog title="" :visible.sync="show" @close="closeAction">
  <custom :data="data"></custom>
</el-dialog>

closeAction: function() {
  this.data = {}
}
  1. 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关闭后,组件会自动销毁,但也会立即重新创建组件,会直接触发组件的生命周期方法createdmounted,不知道为何这样设计。
可使用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打开时,组件才会新建,才会触发createdmounted

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容