AzeShinja的博客

在使用el-tree的时候想要好看的滚动条效果，但是懒得自己搞，就想着使用el-crollbar去解决，但是出现的效果是只有垂直滚动条没有水平滚动条，并且横向的数据被遮住了。

实现内凹边角

naive-table 的空数据滚动

我的实现方式是通过html中双层for循环做的首先我们把数组数据处理一下，因为我们是每5个元素分成一个div看下数据格式： data() { return { examList: [ { title: '正题', listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }, { title: '正题1', listData

要使用::v-deep {}

<style lang="scss" scoped>::v-deep .clearPadding .vxe-cell { padding: 0;}::v-deep .clearPaddingLeft .vxe-cell { padding-left: 0px;}::v-deep { .main-el-switch { position: relative; .el-switch__core { height: 24px; border

经常能遇到一个需求，需要做成如下的样子但是总所周知，element的clearable和后缀图标时位置是冲突的， 他会这样:造成这样的原因是因为：所以我们只要把他们的父级内容改为反序的不就行了，所以::v-deep { .el-input__suffix { // 处理前缀图标不垂直居中的问题 height: auto; font-size: 20px; &-inner { flex-direction: row-rev.

首先介绍一下我遇到的场景如上图所示， 我想要添加更多内容跟着tips一起高亮， 可见遮罩层的 position:fixed; z-index: 2001已经遮挡住了此时脑袋里面浮现了两种解决方案：另新建一个div，使div完全复制这块div内容，再优先级高于这个遮罩层就行了。但是这样有一个缺点，由于部分布局不同，这个遮盖的div可能不会完全的准确覆盖此div，达不到最理想的效果。第二种， 在源div上操作，使其可以显示在遮罩层之上这里我说一下第二种：在此div上添加属性：position

首先看一下横向滚动条我说一下完成这个效果我所用到的思路使用某一位置 居左的距离 / 总div距离 * 滚动条宽度 = 滚动条居左的距离（错误）上面说法错误是因为当时误判断了滚动条滚动的距离不是元素的offsetLeft通过元素的offsetLeft直接赋值给滚动条的ScrollLeft， 发现已经实现了定位效果，但是并不是居中，为了居中我们就需要一点点骚操作先看HTML的绑定详情：<div class="tasks" ref="tasks" style="overflow: hidd

使用伪类的实现方法HTML的结构 <el-form ref="form-head" label-width="auto" inline class="form-header-box"> <transition-group name="el-zoom-in-center" tag="div"> <!-- <el-form-item key="name" label="姓名"> &l.

先上效果图头部的CSS代码： width: 100%; height: 38px; flex: 0 0 38px; margin-top: 20px; line-height: 38px; opacity: 1; background: #f1f4f9; border-radius: 8px 8px 0px 0px; top: 10px;尾部的CSS代码：

在父容器为flex布局下, 在子布局中加入如下CSS代码 overflow: hidden; white-space: nowrap; // 加了这一行才实现的中文有省略号 text-overflow: ellipsis; height: 19px; display: inline-block; width: 43px;在使用ellipsis省略号的时候， 要做到本元素足有块级元素的属性有固定宽和ov