ElementUI bug汇总

[ly2011]

1. 侧边栏不会刷新

解决方案：给 $route.query 设置一个任意值即可，如：

const qparams = this.$route.query;
    qparams.tmp_randomTime = isNaN(parseInt(qparams.tmp_randomTime))
      ? ''
      : parseInt(qparams.tmp_randomTime);

2. 分页ajax拉取表格数据，el-pagination 中的 page无法正确高亮

解决方案：total(总条数)默认值必须设置为 null。例如：

      searchForm: {
        page: 1,
        size: 10,
        total: null
      },

3. 列表页跳转到详情页，再从详情页回到列表页，保留原来的滚动条高度

解决方案：在列表页跳转前，在params中携带 scrollTop 参数，返回时再返回即可。例如：

params.scrollTop =
        document.querySelector('.main-container').scrollTop || 0;

4. ElementUI el-form 内嵌 vue-preview 会导致vue-preview点击关闭按钮或者切换到下一张图片时路由切换 解决方案： 不要在 el-form 内嵌 vue-preview, 并且配置 vue-preview的参数 history: false。

Vue.use(VuePreview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {
    top: 0,
    bottom: 0
  },
  captionEl: false,
  fullscreenEl: true,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: false,
  tapToToggleControls: false,
  history: false
});

el-date-picker 内嵌在 el-dropdown 下，当选择完日期后，el-dropdown也会跟随着关闭

解决方案：修改 el-dropdown 的 hide()方法

      hide () {
        if (this.triggerElm.disabled) return;
        // console.log('dropdown_showDatePicker: ', this.showDatePicker)
        if (this.showDatePicker) return; // 展开事件组件时，禁止关闭下拉弹框
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.visible = false;
        }, this.hideTimeout);
      },

回车自动提交表单

详情：做列表搜索的时候当表单只有单个输入框时，回车会自动提交表单

解决：(组织表单提交)

<el-form :inline="true" :model="params" @submit.native.prevent>
</el-form>

监听 input 回车

<el-input v-on:keyup.enter.native="login"></el-input>

table组件expand每次只展开一项

解决：但是我在Stack Overflow找了个更简单的方法，要直接操作table树๑乛◡乛๑，只需要用到expand的方法

<el-table @expand="handleExpandRow" ref="row_table">
</el-table>
//method:
handleExpandRow(row,expanded){
    this.$refs.row_table.store.states.expandRows = expanded ? [row] : [];
}

附上Stack Overflow原地址：大神在此 ————

以上是v1.4版本的，由于v2.0版本修改了返回参数，仿照上例修改了新的：

handleExpandRow(row,expandRows){
    this.$refs.raw_table.store.states.expandRows = expandRows.length !== 0 ? [row] : [];
}

其他

1. 『表单开发』一次即通关的5个技巧