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])文章来源：https://www.toymoban.com/news/detail-462909.html
<el-tree
ref={menuTree}
data={props.data}
props={defaultProps}
node-key={defaultProps.id}
/>------持续更新中------文章来源地址https://www.toymoban.com/news/detail-462909.html
到了这里，关于【element-ui】Bug集合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
