element-ui表格样式错乱调整方式

在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱，以下提供几种错乱方式的解决方法1、线没有对齐在全局样式中写下这样的代码/* Element-UI 的table 组件出现表格线条不对齐的问题 */body .el-table th.gutter {display: table-cell !important}2、fixed固定导致的高度问题全局样式中写如

呀呀音

4599人浏览 · 2020-12-29 11:07:52

呀呀音 · 2020-12-29 11:07:52 发布

在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱，以下提供几种错乱方式的解决方法
1、线没有对齐
在全局样式中写下这样的代码

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
body .el-table th.gutter {
    display: table-cell !important
}

2、fixed固定导致的高度问题
在这里插入图片描述

全局样式中写如下代码

.el-table__fixed-right{
    height: 100% !important;
}

3、去掉鼠标hover修改背景色事件

/* 去掉鼠标hover事件 */
/* tr {
    pointer-events: none;
} */

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^