vue12-ElementUI 踩的坑

最近项目中用到Element UI,大部分组件都有用到,不乏踩过一些莫名其妙的坑,特此记录

1. el-table使用的时候,刷新列表列的排序偶尔会错乱,可以通过给每一列也就是el-table-column中增加key属性,来解决,代码如下,也可以写:key = MathRadom(),不过好像会出bug,我是没有这样写,慎用,

  写key属性还可以解决v-if在列上不生效,导致页面卡死的问题,虽然很莫名其妙,但是确实写上了就好了

        <el-table-column
           key="1"
          prop="status"
          label="员工状态"
          min-width="80"
          align="center">
        </el-table-column>
        <el-table-column
          key="2"
          ......
        </el-table-column>

2. el-table使用的时候,高度的问题,可以动态计算页面高度,来设置max-height,从而根据自适应页面高度

        <el-table
            size='small'
            :max-height='detailHeight-130'
            v-loading='loading'
            ref='multipleTable'
            element-loading-text='拼命加载中'
            :data='list'
            border
            style='width: 100%;'
            @select-all='allSelect'
            @selection-change='handleSelectionChange'
        >
       //  在mounted函数中计算页面高度
          mounted() {
            this.detailHeight = document.documentElement.clientHeight - 162
          }