前端解决方案

467 阅读1分钟

el-table 行高

:row-style="{height:10+'px'}"      :cell-style="{padding:2+'px'}"

修改button选中状态的样式

.el-button:focus,.el-button:hover { background: #409EFF; /* border-color: #48D1CC; */ color: #fff;}

.el-collapse-item:focus,.el-collapse-item:hover{background:#409EFF;color:#fff}

数组去重

this.endlist = Array.from(new Set(this.endlist))

对el-table 行内cell自动内容换行

blog.csdn.net/huxiaochao_…

class="cell"/deep/ .el-table .cell { white-space: pre-line;}

对于样式属性修改不成功,因为style 加了scoped

在样式修改中需要加/deep/

修改折叠面板的选中状态is-active

/deep/ .el-collapse-item__header.is-active{ background-color:#409EFF;   color: white;}

// 修改初始化折叠面板行高

/deep/ .el-collapse-item__header{ height: 35px;}

Vue table 表格中参数过长省略并且提示显示

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

信息弹框在对话框上

设置对话框的参数z-index="1000"原理:给el-dialog 加z-index="1000",修改堆叠次序
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅在定位元素生效el-dialog 的源码,是设置了position 的,所以满足使用需求
使得信息弹框置于对话框之上拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数,则离用户更近,为负数则表示离用户更远。

vue-element-admin 左侧的导航栏固定展开,不关闭

https://blog.csdn.net/jiangyue2694/article/details/109157171?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control并且去掉默认展开的节点

设置el-table 单独列的颜色

el-table 设置一列的颜色https://blog.csdn.net/sy_yan/article/details/109314843`<el-table-column prop="server_ip_address" label="服务器IP">     <template slot-scope="scope">     <span :class="'font-class-red'">{{      scope.row.server_ip_address     }}</span>    </template>       </el-table-column>`

message弹框右侧边展示

//  this.$notify({   //  title: '失败',   //  message: 'IP地址不合法!',   //  type: 'error',   //  duration: 2000   // })