ElementUI常用问题积累

1. el-dialog包含el-form，回车查询时，页面刷新

<el-form @submit.native.prevent></el-form>

2. el-input 多层嵌套 无法输入的问题

 <el-input v-model="name"  @input="oninput"></el-input>

oninput() {
   this.$forceUpdate(); 
},

3. el-select v-model 绑定value值，如何显示label值的问题 【 :value=“item.value + ‘’” 】

<el-select v-model="form[field.field_name]">
   <el-option v-for="item in field.widget.load_template" :key="item.value" :label="item.label" :value="item.value + ''">
   </el-option>
</el-select>

4. el-dialog 层级出现问题
问题：弹框的z-index比遮罩层的大, 但是遮罩层却显示在弹框上层
解决方式： 在el-dialog中加上append-to-body

<el-dialog title="流程" :visible.sync="isShow" append-to-body></el-dialog>

5. el-table 多出一条线

.el-table::before {
  z-index: inherit; // 规定应该从父元素继承 z-index 属性的值。 
}

6. el-table 中使用v-if，表格内容错乱的问题
给 每一个 el-table-column 加一个 key 属性

 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        v-if="isShow"
        prop="date"
        key="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        key="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        key="address"
        label="地址">
      </el-table-column>
    </el-table>

未完待续…