element ui 采坑记录

element UI

1、下拉列表

问题 ：页面滚动 下拉列表与输入框分离

解决方法

• 添加属性 :popper-append-to-body=“false” 将弹出框插入body元素，解决弹出框定位问题
• 但若表格中有嵌套下拉框 此方法无效并造成下拉框无法显示问题

2、popover

问题：页面popover随页面滚动

解决方法

• 固定父级容器高度 height

<div style="padding:18px;box-sizing:border-box;height:calc( 100% - 104px)">
   <!-- <headTop></headTop> -->
   <keep-alive :include="tagsList.map(i=>i.name)">
     <router-view></router-view>
   </keep-alive>
</div>

3、table

问题：表格页面抖动

可能的原因

• 多个v-if是表格列数错乱

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="selection" width="55" :key="Math.random()" v-if="show"></el-table-column>
  <el-table-column prop="date" label="日期" :key="Math.random()"></el-table-column>
  <el-table-column prop="name" label="姓名" :key="Math.random()" ></el-table-column>
  <el-table-column prop="address" label="地址" :key="Math.random()" ></el-table-column>
  <el-table-column fixed="right" label="操作" width="100" :key="Math.random()" v-if="show">
    <template slot-scope="scope">
      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
      <el-button type="text" size="small">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

解决方法

为字段添加key=“Math.random()”
原因:是因为表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，相同dom会被复用;所以，通过key去标识一下当前行是唯一的，不许复用，就行了。

• 表格宽度不够

表格有滚动条且列均为自适应宽度，导致表格一直重新计算列的宽度，从而导致页面抖动。

4、input

input type='number’时 会有上下箭头

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}