精华内容
下载资源
问答
  • el-scrollbar 优化滚动条样式

    万次阅读 2019-12-03 19:33:16
    element-ui 隐藏组件 el-scrollbar 优化滚动条样式

    博客地址:http://www.globm.top/blog/1/detail/30
    配置需求
    导入element-ui

    效果图修改后滚动条样式

    页面引入

    <el-scrollbar>
      <div>内容</div>
    </el-scrollbar>
    
    // 修改页面底部滚动条显示效果,可根据实际需要引入
    /deep/.el-scrollbar{
      height: 100%;
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .el-scrollbar__bar{
    	// 默认展示滚动条
         opacity: 1;
       }
       .el-scrollbar__thumb{
       	// 改变滚动条颜色
         background: #ED4040;
       }
    }
    

    注: 父元素需设置高度

    展开全文
  • el-dialog 拖拽及居中效果

    万次阅读 2019-11-28 16:39:04
    el-dialog拖拽及改变大小 1.新建directive.js import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注:可以改变类名使其它元素也实现拖拽效果 //鼠标...

    博客地址:http://www.globm.top/blog/1/detail/35
    el-dialog拖拽及改变大小

    1.新建directive.js

    import Vue from 'vue';
    

    只能在窗口内拖拽

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
      bind (el) {
        // 备注:可以改变类名使其它元素也实现拖拽效果
        // 鼠标点击拖拽区域
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        // 被拖拽元素主题
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cursor = 'move'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    
        dialogHeaderEl.onmousedown = (e) => {
          // 鼠标按下,计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
    
          const screenWidth = document.body.clientWidth // body当前宽度
          const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取)
    
          const dragDomWidth = dragDom.offsetWidth // 对话框宽度
          const dragDomheight = dragDom.offsetHeight // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
          // 获取到的值带px 正则匹配替换
          let styL, styT
    
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes('%')) {
            // eslint-disable-next-line no-useless-escape
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
            // eslint-disable-next-line no-useless-escape
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
          } else {
            styL = +sty.left.split('px')[0]
            styT = +sty.top.split('px')[0]
          }
    
          document.onmousemove = function (e) {
            // 通过事件委托,计算移动的距离
            let left = e.clientX - disX
            let top = e.clientY - disY
    
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
    
            // 移动当前元素
            dragDom.style.transform = 'none'
            dragDom.style.left = `${left + styL}px`
            dragDom.style.top = `${top + styT}px`
    
            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          }
    
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    })
    

    可以移出窗口

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
        bind(el) {
        //备注:可以改变类名使其它元素也实现拖拽效果
        	//鼠标点击拖拽区域
            const dialogHeaderEl = el.querySelector('.el-dialog__header');
            //被拖拽元素主题
            const dragDom = el.querySelector('.el-dialog');
            dialogHeaderEl.style.cursor = 'move';
    
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
    
                // 获取到的值带px 正则匹配替换
                let styL, styT;
    
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if(sty.left.includes('%')) {
                    // eslint-disable-next-line no-useless-escape
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    // eslint-disable-next-line no-useless-escape
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                }else {
                    styL = +sty.left.split('px')[0];
                    styT = +sty.top.split('px')[0];
                }
    
                document.onmousemove = function (e) {
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;
    
                    // 移动当前元素
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
    
                    //将此时的位置传出去
                    //binding.value({x:e.pageX,y:e.pageY})
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    

    弹窗宽度拖大 拖小

    // v-dialogDragWidth: 弹窗宽度拖大 拖小
    Vue.directive('dialogDragWidth', {
        bind(el, binding) {
            const dragDom = binding.value.$el.querySelector('.el-dialog');
    
            el.onmousedown = (e) => {
    
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft;
    
                document.onmousemove = function (e) {
                    e.preventDefault(); // 移动时禁用默认事件
    
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    dragDom.style.width = `${l}px`;
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    
    

    2.在main.js中引入directive.js
    3.在el-dialog标签的开始位置加入v-dialogDrag或 v-dialogDragWidth就可以实现相应的效果

    el-dialog居中显示效果

    // 推荐直接使用js实现
    this.$nextTick(_ => {
      this.$refs.dialog.style.marginTop
       = `calc((100vh${this.$refs.dialog.clientHeight}px) / 2)`
    })
    
    //配合dialog自带属性实现效果,不建议使用,固定定位元素受动画影响
    .el-dialog{
        transform: translateY(-50%);
        margin-top: 0!important;
        top: 50%;
    }
    
    //使用弹性布局,兼容性较差
    .el-dialog{
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        /*height:600px;*/
        max-height:calc(100% - 30px);
        max-width:calc(100% - 30px);
    }
    .el-dialog .el-dialog__body{
        flex:1;
        overflow: auto;
    }
    
    展开全文
  • 如下布局,如果将:sm="0"则会...el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0" :sm="0" :md="7" :lg="5" :xl="4" >456</el-col> 完整得例子 新建一个demo

    如下布局,如果将:sm="0"则会导致456始终不显示
    下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug

    <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col>
    <el-col :xs="0" :sm="0"  :md="7" :lg="5" :xl="4" >456</el-col>
    

    完整得例子

    新建一个demo.html文件内容如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试页面</title>
        <!-- cdn引入ElementUI样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .myclass1 {
                height: 200px;
                background-color: slategray;
            }
    
            .myclass2 {
                height: 200px;
                background-color: #867090;
            }
        </style>
    
    </head>
    <body>
    <div id="app">
        <el-row>
            <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
            <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" >456</el-col>
        </el-row>
    
    </div>
    
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        const vm = new Vue({ // 配置对象 options
            // 配置选项(option)
            el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
            data: {
                screenWidth: 992
            },
        })
    </script>
    </body>
    </html>
    
    

    会发现456不会显示,虽然宽度有了但是内容456却不显示
    在这里插入图片描述

    将sm得值设置非0则正常,但是屏幕宽度为sm时会导致456被挤下去如下在这里插入图片描述

    解决方法,通过vue得v-if或者v-show

    首先、将sm不要设置为0,例如设置为1
    其次、为了解决这个sm=1的问题,通过js获取屏幕宽度,当屏幕<992时就不显示即可

    当屏幕小于992px时将其隐藏掉

    <el-row>
        <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
        <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" 
        	class="myclass2" v-show="screenWidth >= 992">456</el-col>
    </el-row>
    

    以及通过vue获取屏幕宽度

    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            screenWidth: 992
        },
        mounted(){
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        }
    })
    

    效果
    在这里插入图片描述

    展开全文
  • .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; } 组件化开发 less则需要加上/deep...

    html中使用,css中加入如下代码即可

    /*最外层透明*/
    .el-table, .el-table__expanded-cell{
        background-color: transparent;
    }
    /* 表格内背景颜色 */
    .el-table th,
    .el-table tr,
    .el-table td {
        background-color: transparent;
    }
    

    组件化开发

    less则需要加上/deep/生效,还有注意作用域要是scoped<style scoped>
    如下

    /*最外层透明*/
    /deep/ .el-table, /deep/ .el-table__expanded-cell{
      background-color: transparent;
    }
    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
      background-color: transparent;
    }
    

    stylus则用>>>替代,注意需要有scoped,
    也就是<style scoped lang="stylus" rel="stylessheet/stylus">需要加上scoped否则深度作用>>>不生效

    /*最外层透明*/
    >>>  .el-table, >>>  .el-table__expanded-cell
      background-color transparent
    
    
    /* 表格内背景颜色 */
    >>>  .el-table th, >>>  .el-table tr, >>>  .el-table td
      background-color transparent
    
    

    有效果的,点个赞,让更多人知道怎么处理。


    关于表格的其它一些操作

    去除最底层表格的下划线

    在这里插入图片描述

    /* 删除表格下最底层的横线 */
    .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
    

    设置表格头的字体颜色

    在这里插入图片描述

    /* 表格表头字体颜色 */
    .el-table thead {
      color: #ffffff;
      font-weight: 500;
    }
    

    设置滚动条样式

    在这里插入图片描述

    /*表格滚动条和字体颜色*/
    .el-table
      border-bottom 0
      color hsla(0,0%,100%,.6)
      /* 设置滚动条的样式 */
      ::-webkit-scrollbar
        width 5px;/*滚动条粗细*/
    
      /* 滚动槽 */
      ::-webkit-scrollbar-track
        -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.3)
        border-radius 10px
    
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb
        border-radius 10px
        background rgba(0, 0, 0, 0.3)
        -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.5)
    
    
    

    移除默认的hover样式

    这个贼坑,社区中很早以前就提过了,一直没有解决。
    el-table元素设置一个id,我这里叫做playList,你可以随意,注意下面的getElementById中一致即可,放在钩子函数即可,例如setInterval时间为0,就是一直去除,因为这个熟悉似乎是动态加上去的,如果直接使用document.getElementById("playList").classList.remove("el-table--enable-row-hover")会造成移除了又被添加进去了

    mounted() {
      setInterval(() => {
      // (也可以使用`this.$ref`获得表格元素让母后`.classList.remove("el-table--enable-row-hover")`)
          document.getElementById("playList").classList.remove("el-table--enable-row-hover")
      })
    }
    

    附上整体效果截图
    在这里插入图片描述

    展开全文
  • el-row> <el-col> 与<el-table-column>用法区别! 初学者可能很容易混淆它们的用法,其实是没有认真看官方文档,下面总结一下: <el-row> <el-col>标签是属于element的Layout布局控件...
  • EL表达式

    万次阅读 2019-06-26 16:10:55
    EL表达式极大地简化了JSP表达式 功能:在页面上显示数据。 示例如下: 运行结果: EL表达式运算符: empty运算符: 判断一个对象是否为空
  • EL表达式详解

    万次阅读 多人点赞 2018-04-08 12:27:28
    该篇博客主要关于EL表达式,废话不多说=-=进入正题 博客目录 1、EL表达式介绍 2、EL获取数据 3、EL中的内置对象 4、EL访问Bean的属性 5、EL访问数组中的数据 6、EL获取list中数据 7、EL访问...
  • el-row和el-col问题汇总

    千次阅读 2020-03-16 16:49:04
    一、el-col为空不显示 <el-row> <el-col :span="7">啊啊啊</el-col> <el-col :span="1"></el-col> <el-col :span="7">哦哦哦</el-col> <el-col :span="1">&...
  • npm install el-tree-transfer --save 或 npm i el-tree-transfer -S 结果如下即成功: 然后引入: <script> import treeTransfer from 'el-tree-transfer' // 引入 export defu...
  • element-ui el-checkbox的一些坑

    万次阅读 多人点赞 2018-08-01 09:31:54
    el-checkbox @change="handleCheckedCitiesChange" v-model="checkAll" :label="list.eventtypeid" &gt;全选&lt;/el-checkbox&gt; &lt;el-checkbox-group v-model=&...
  • 直接写在没有scoped的....reprint-remark-form .el-form-item__error { transition: none!important; } 2.多选框选中时页面抖动 .el-checkbox ::after { transition: none!important; } 3.单选框选中时页面...
  • el-select 示例: 代码: <el-select v-model="doc.zhic" placeholder="请选择"> <el-option v-for="(item,index) in zhicdata" :key="index" :l...
  • 什么是EL表达式,EL举例,EL使用,EL概念

    千次阅读 2009-04-11 19:42:00
    什么是EL表达式?EL表达式:expression language,即表达语言,它是为了便于存取数据而定义的一种语言,JSP2.0之后才成为一种标准。形式:以“${”开头,以“}”结尾,通过PAGE指令来说明是否支持EL表达式,具体举例:...
  • 在一个Vue+element 的项目中做表单操作,加入el-col后出现了,输入框点击无效的情况 <div id="app"> <el-form ref="form" :model="form" label-width="80px">...el-form-item label=...
  • el-tabs事件绑定(Element UI)

    万次阅读 多人点赞 2018-04-27 18:57:21
    el-tabs v-model=&amp;quot;activeName&amp;quot;&amp;amp;gt; &amp;amp;lt;el-tab-pane name=&amp;quot;0&amp;quot; label=&amp;quot;标签1&amp;quot;&amp;amp;gt;&amp;...
  • JAVA EL表达式

    千次阅读 2019-06-09 20:31:36
     JAVA中用于取值的语言叫EL表达式。  EL为表达式语言(Expression Language),可以简化对变量对象的访问,它的表达式以"${“开始,以”}"结束。  EL表达式的操作内容可以是:常量、变量、jsp隐含对象  EL表达式提供...
  • el-select实现change事件

    万次阅读 2019-08-20 10:34:43
    官网提供了el-select的change事件,但是并没有提供使用示例,但是最近在vue项目中却要使用到。 直接上代码,HTML部分 <el-select @change="selectChanged" v-model="devType" size=small> <el-option v...
  • EL表达式与JSTL简单入门

    万次阅读 多人点赞 2018-06-04 08:46:17
    EL概述  EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写。  简单来说EL表达式就是让程序员,简化了代码的书写量。在学EL表达式之前我们必须...
  • Vue ElementUI在el-table中使用el-popover

    千次阅读 2020-05-11 15:55:19
    el-table-column width="100" align="center" label="操作"> <template slot-scope="scope"> <el-popover width="160" :ref="`popover-${scope.$index}`"> <p>确定删除该项吗?&
  • EL表达式语法

    千次阅读 2018-12-25 21:01:01
    EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护。 使用EL表达式的目的:从作用域中获取指定属性名的共享数据 <%@ page isELIgnored=...
  • 最近用到 element-ui 的 el-form,要求一行里面放置多个 el-form-item。 其实很简单,用 layout 布局就可以简单实现。 layout 布局是通过基础的24分栏,从而迅速简洁地创建布局。 代码实现如下: <el-form size...
  • 关于el5,el6和el7是什么

    千次阅读 2017-07-11 07:33:46
    What does el5, el6, and el7 mean?EL is short for Red Hat Enterprise Linux (EL). - EL6 is the download for Red Hat 6.x, CentOS 6.x, and CloudLinux 6.x. - EL5 is the download for Red Hat 5.x, CentO
  • 最近做管理后台的时候,遇到一个很恶心的事情,就是el-table的el-form里面加了el-tree导致表格错位,一开始定位是我的布局有问题,处理了几个小时都没有处理好。百度上也没有解决方案,可能我这坑掉的人比较少吧。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 120,483
精华内容 48,193
关键字:

el