![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css样式问题
靓靓的圆子
这个作者很懒,什么都没留下…
展开
-
当鼠标移入div,出现编辑和删除的按钮,移出就隐藏编辑和删除按钮
移入移出原创 2022-12-20 14:31:36 · 767 阅读 · 1 评论 -
改变表格自带的 滚动条 的宽度
滚动条的样式原创 2022-06-07 10:57:35 · 444 阅读 · 0 评论 -
分页的基本格式
1,html<div class="pagination" v-if="PageCount>0" style="position: absolute; right: 10px;bottom: 10px;"> <el-pagination :total="TotalCount" :page-sizes="[20, 50, 100, 200]" :page-size="20" layout="total, sizes, prev, pager, n原创 2021-11-01 16:14:06 · 196 阅读 · 0 评论 -
点击修改变输入框,保存变文字,超出会隐藏,滑过出现全部
<div class="" style="width: 39%;"> <span class="name2" style="width:25.5%;"> 工作单位 </span> <span class="value" style="width:50%;"> <span class="patientInfoDiagnosis" v-if='!isEdit原创 2021-09-24 11:45:17 · 218 阅读 · 1 评论 -
侧边导航栏 通用样式
<ul class="left-nav"> <li v-for="(link,index) in nav"> <router-link :to="link.path" exact v-if="index===1"> <el-popover content="入院48小时内" trigger="hover"> <template slot="reference原创 2021-09-06 16:56:37 · 756 阅读 · 0 评论 -
分页常用的完整格式 通用样式
<div v-if="totalPage>0"> <el-pagination :total="monMsg.count" :page-sizes="[20, 50, 100, 200]" :page-size="20" layout="total, sizes, prev, pager, next" @current-change="$_monitoring_init" @size-change="han原创 2021-09-01 10:06:55 · 277 阅读 · 0 评论 -
对话弹窗的头部样式
<el-dialog top="2vh" title="异常指标明细" :visible.sync="LeftRightDialog" :modal="true" width='1400px'></el-dialog>这个只是基于element的对话框做的调整,eltableDiv 是父类名(为了不污染全局样式要加父类名)<style> .eltableDiv .el-dialog { height: calc(100% - 98px);原创 2021-08-26 16:37:51 · 792 阅读 · 0 评论 -
两个表格-左右布局
<template> <div class="LeftRightLayout"> <!-- 患者列表来的异常数量弹窗 --> <div style="width:20%;height: 100%" v-if="textCode == 'JHTableList'"> <el-table :data="LabResult" border class="eltable" height='100%'原创 2021-08-26 16:23:44 · 911 阅读 · 0 评论 -
两个按钮切换的样式
<span :class="activeCode == 1 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(1)"> 全选</span><span :class="activeCode == 2 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(2)"> 反选</span>export原创 2021-08-26 14:58:26 · 420 阅读 · 0 评论 -
用媒体查询做,适应不同的屏幕
@media screen and (min-width: 1802px ) { .cards-wrap .card-item { width: 20%; } } @media screen and (min-width: 1280px) and (max-width: 1801px ) { .cards-wrap .card-item { width: 25%; } } @media screen and (min-width:原创 2021-08-24 14:42:39 · 411 阅读 · 0 评论 -
表格通用样式el-table的表头颜色样式,表内边框行高样式,点击行高亮变颜色
:height='400'style="width: 100%":header-cell-style="{'text-align':'center',background:'rgb(15, 73, 237,.1)',color:'#333333','font-size': '14px','font-family': 'PingFang SC','font-weight': '700','border-color': '#CFDBFB'}" :cell-style="{'text-align':'cen原创 2021-08-19 11:01:20 · 1700 阅读 · 0 评论 -
css效果,划过向上移动的动画
.divtop:hover { box-shadow: 0px 0px 20px 0px rgba(61, 89, 153, 0.86); transition:transform 0.5s; transform:translate(0,-10px); }原创 2021-08-04 17:00:18 · 386 阅读 · 0 评论 -
el-element的el-table的表头更改颜色
<el-table :data="moduleData2" tooltip-effect="dark" :header-cell-style="{background:'#ECF1FE'}"></el-table>api里有个header-cell-style,表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。就可以改变表头的颜色了...原创 2021-06-17 10:49:26 · 5557 阅读 · 0 评论 -
vue.directive来做的拖拽
自定义指令:除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。详细可以看vue官方文档<div class="box" v-drag="isDrag"> <p class="setting-btn"></p> <p class="boxP">患者信息</原创 2021-06-10 09:19:46 · 123 阅读 · 0 评论 -
用是el-tree,超出部分没有出现横向滚动条
.DataLeftList /deep/ .el-tree-node>.el-tree-node__children{ overflow: visible; }DataLeftList 是父级的class原创 2021-04-28 11:32:54 · 412 阅读 · 0 评论 -
给文字换行
word-wrap:break-word;;white-space:pre-line;这个css的样式,可以换行我这里是后端读取的数据。里面有换行符加上这个就可以显示换行了,不加就不行原创 2021-04-21 14:23:32 · 43 阅读 · 0 评论 -
input框限制只能输入数字,不能输入小数
html代码<el-input clearable v-model="randomInput" @input.native="changeNum(randomInput, 'randomInput')" @blur="randomInputBlur"> </el-input>js方法changeNum(val, nodeType) { this.$nextTick(() => {原创 2021-03-04 14:20:53 · 1649 阅读 · 1 评论 -
el-table表格表头居中,表内容根据字段来右对齐,合计的也是跟着内容来右对齐
下面是完整的代码在el-table标签里控制表头::header-cell-style="{‘text-align’:‘center’}"在el-table-column里面控制表内容::align=“title.Code==‘FailPresNum’ || title.Code==‘FailRate’ ? ‘right’ : ‘center’”<el-table v-loading="loading" win-loading-text="加载中" :data="tableData21" bo原创 2020-12-18 10:25:42 · 1332 阅读 · 1 评论 -
el-select的下拉框内容超过了下拉框的宽度要隐藏内容
screen为el-select的父级.screen { /deep/ .el-select__tags { &>span { width: 100%; display: flex; /deep/ .el-tag.el-tag--info.el-tag--small.el-tag--light { &:first-child { max-width: 100%;原创 2020-12-17 09:24:14 · 2230 阅读 · 0 评论 -
vue cli3中,在vue.config.js文件中怎么引入其他js文件
1,在要被引入的文件中module.exports = { interfaceIP: "http://172.16.170.135:900/PEapi"}2,在vue.config.js中,const interfaceIP = require('./public/configip');console.log(interfaceIP)console.log(interfaceIP.interfaceIP)module.exports = { productionSourceMap原创 2020-11-17 14:12:22 · 8547 阅读 · 2 评论 -
element-ui的级联选择器el-cascader
1,我们用级联选择器的时候,会用到多选,那样会在输入框后面跟着个+1的span标签,会使输入框跳行,可以让这个span标签隐藏。.Header .screen是父级和父父级.Header .screen /deep/ .el-tag.el-tag--info.el-tag--small.el-tag--light:nth-child(2) { display: none; }...原创 2020-10-21 15:33:11 · 285 阅读 · 0 评论 -
el-table表格的合计项单元格改变背景色
这是el-table表格的合计项,需要在有合计的地方改变背景色用的是jquery来获取元素// let addFontColor = setTimeout(()=>{ // console.log($(".w-table__footer-wrapper div").length-1) // for( var i = 0;i<$(".w-table__footer-wrapper div").length-1; i++){原创 2020-08-13 15:57:09 · 1937 阅读 · 0 评论 -
CSS中的overflow: hidden会使旁边的元素错位
这是我原来的布局,总体是编号标题数目但是因为标题可能太长,于是给a加上了超出的话就用省略号的方法,结果我一加overflow:hidden,叛变的i标签的内容和span内容就掉到下面了就像这样,对不齐了,求大神说说这事什么情况附上样式代码:#hot_list li{height:33px;line-height:33px;font-size:14px;border:1px solid red;display:inline-block}#hot_list li i{height:3原创 2020-05-12 11:10:17 · 1019 阅读 · 0 评论