【element-ui】Bug集合_element ui漏洞

1、el-dialog中el-select下拉框无法展示 

在el-dialog与el-select配合使用的时候，我们会发现el-select无法下拉，其实这问题就是下拉框层级不够和样式问题,那如何解决呢？下面就是解决方式。

<template>
    <el-select
        :popper-append-to-body="false"
        popper-class="select-popper">
    </el-select>
</template>
<style lang="scss" scoped>
::v-deep .select-popper{
    z-index: 9999 !important;
    top: auto !important;
    left: auto !important
}
</style>

2、el-form表单el-radio-group校验未生效

<el-form>
    <el-form-item prop="radio">
        <el-radio-group v-model="form.radio">
            <el-radio :label="1"></el-radio>
            <el-radio :label="2"></el-radio>
        </el-radio-group>
    </el-form-item>
</el-from>

这个直接说结论，你的form.radio 必须为空字符，才能使require生效！

 3、el-dialog中的el-select和el-tree 组件点击按钮时，el-dialog会晃动

解决方法：

.el-dialog{
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

4、el-table 设置max-height 后底边框消失

 没有设置最大高度，则有底边框，设置了则没有底边框

解决方法：

要设置最大高度时，才修改el-table 的border-bottom 样式，不设置最大高度时，则不需要加任何代码

    <el-table
      :data="data"
      border
      :style="{
        borderBottom: maxHeight === 'auto' ? 'none' : '1px solid #e8eded'
      }"
      :max-height="maxHeight"
      />
 
<script>
export default{
    data() {
        maxHeight: 'auto'
    }
}
</script>

5、el-input[type="number"] 时去除上下计数器 

只想要输入框，并且只能自己输入数字，不想要上下计数器去点击改变数值

解决方法：

    ::v-deep input::-webkit-outer-spin-button,
    ::v-deep input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

6、 el-table 出现横向滚动条导致fixed栏无法对齐

基础解决方法：

解决el-table 出现横向滚动条情况下 fixed栏与左边不对齐的情况，padding-bottom为横向滚动条高度

css修改
.el-table__fixed-body-wrapper {
    .el-table__body {
        padding-bottom: 15px;
    }
}
 
js执行
$refs.table.doLayout()

当你执行上述方式无法解决固定栏对齐问题时，那么来试试下面这种终极解决方法：

终极解决方法：

首先将表格内的fixed属性去掉不使用，我们自己来写固定栏效果

效果图如下：

 scss样式写法，下面fixed-4, fixed-0 是样式类名，假设有纵向滚动条，那么表格body不需要固定偏移，赋值class为fixed-0，而表格header需要固定偏移，所以赋值class为fixed-4

$width: (
  fixed-4: 4,
  fixed-0: 0,
);
 
@each $key, $value in $width {
    .#{$key} {
      position: sticky !important;
      transition: background-color 0.25s ease;
      background-color: #fff;
      right: $value + px;
      box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
    }
  }

在el-table表格使用中，有两属性可以控制header和body部分的class名的喔~

<el-table
    :header-cell-class-name="headerCellClassName"
    :cell-class-name="cellClassName"
>
</el-table>
 
header-cell-class-name：控制header class
cell-class-name：控制body class
 
其回调都是 { row, column, rowIndex, columnIndex }
 
methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      return 'fixed-0'
    }
}

 以上方式使用后，就可以实现固定列和其他列对齐啦，那为啥会出现这种原因呢？因为el-table其本质就是两个表格，没有固定列时是一个，有固定列会多生成一个表格来展示固定列

7、el-tree 点击高亮后的颜色修改

默认样式：

但是我们需要黑色背景的话，然后点击时修改每一行的背景颜色和选中颜色，代码如下，你也可以使用::deep噢，一样的意思

:global {
    .el-tree {
      background-color: #000;
      color: #fff;
      .el-tree-node__content {
        &:hover {
          background-color: #000;
          color: #F59A23;
        }
      }
      .el-tree-node:focus > .el-tree-node__content {
        color: #F59A23;
        background-color:  #000;
      }
    }
  }

修改后效果：

8、el-tree 默认值选择

设置默认值时，如果使用default-checked-keys，则会导致在选择其他值时，该默认值会一直选中，当然你也可以选择主动置空，但是我觉得非好方法

        <el-tree  
          data={props.data}
          props={defaultProps}
          node-key={defaultProps.id}
          default-checked-keys={defaultProps.defaultCheckedKeys}
        />

解决方法：

通过ref来调用setCheckedKeys方法设置默认值

 menuTree.value.setCheckedKeys([val])

       <el-tree  
          ref={menuTree}
          data={props.data}
          props={defaultProps}
          node-key={defaultProps.id}
        />

------持续更新中------