步步向前之Element-UI

maxmin 发布于2019-08-05 15:19 / 1789人阅读

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。

Table 固定表头

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
例如：

...

这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的。
值得一提的是，height可以动态绑定，我的解决方案是给表格包一个父元素，并绑定一个值100%给height。

height:Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

点击事件

点击事件刚开始在这里陷入深坑了，拿行的点击事件来讲：
row-dblclick：表格的某一行双击事件。首先是dblclick而不是dbclick!(不知为什么我vscode提示row-dbclick，醉了)，其次调用加@，然后默认参数通常用到最多的是row，不用在括号里写明，在方法里直接声明就可以用了；row-click同理。
例如：

...

配合vue过滤器

主要使用自定义列，参数为 { row, column, $index }


     

//scope.row是当前列的值，prop其实可以不写

自定义表头

文档解释比较简单：

render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—

实现效果：

鼠标移上去会有提示文字弹出，这里用el-tooltips。

无效方案：

   renderHeader (h, { column, $index }) {
     return h("el-tooltip", {
       props: {
         effect: "light",
         content: "根据交易所24小时成交量占比和实时价格加权计算得到",
       }
     },[
       h("span", column.label),
       h("i", {
         class: "icon-tips",
         }
       })
     ]);

渲染结果是一个span包含了label文字，同时有名为el-tooltip的class，并无小图标，后边中括号结构里只能有一个（有待考证）。

可行方案：

   renderHeader (h, { column, $index }) {
     return [
       h("span", column.label),
       h(
         "el-tooltip",
         {
           props: {
             effect: "light",
             content: (function () {
               let label = column.label;
               switch (label) {
               case "加权最新价":
                 return "根据交易所24小时成交量占比和实时价格加权计算得到";
                 break;
               case "偏移价":
                 return "交易所该币对当前最新价-加权价";
                 break;
               }
             })(),
           }
         },
         [
           h("i", {
             class: "icon-tips"
           })
         ]
       ),
       h("span", {
         class: {
           "el-icon-question": true
         }
       })
     ];
   },

事实证明返回的这个数组，可以作为表头内真正的标签元素多个累加，最后一个span是我追加的，其实是多余的，参考ElementUI的Table组件中的renderHeader方法研究，作者研究很透彻，最后把span替换成p也能正常渲染，这是我最后一步尝试的，说明数组内的渲染机制，而h或createElement渲染函数第三个数组参数大于一个的结构均不能被渲染上，而且本标签无论如何都被渲染为span，郁闷。
先这么使用吧，算是满足需求了

vue关于createElement函数，domProps了解下，简单的结构可以用这个实现

可行方案二：使用jsx，直接return （HTML结构）

表格滚动到顶部或底部（原链接）

$refs.table：为el-table设置的ref属性

滚动到第一行：

this.$refs.table.bodyWrapper.scrollTop =0;

滚动到最后一行：

this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;

upload上传组件控制上传图片尺寸

主要在before-upload函数中限制尺寸大小等。


                  点击上传
                  只能上传jpg/jpeg文件，且不超过500kb

beforePicUpload (file) {
    const isSize = new Promise(function(resolve, reject) {
        let width = 200;
        let height = 54;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
      }).then(() => {
        return file;
      }, () => {
        this.$message.error("上传图片尺寸要求200*200!");
        return Promise.reject();
      });
}

Element UI的文件上传组件el-upload的表单校验required问题

template:

    
        //...
        
          
            
              点击上传
              支持格式：jpg、jpeg 像素要求640*240
            
          
        
        //...

script:

export default {
    data () {
      collectionInfos: {},
      rules: {
        ...
        resource_url: [
          { required: true, message: "请选择合辑封面", trigger: "blur, change" },
        ]
      },
    },
 }

类似这样的校验规则在空表单提交时是会正常显示请选择合辑封面的错误提示的，然而在你上传完图片后再次提交，依然会校验不通过，因
为在你选择手动提交文件时，这个resource_url就不可能像自动上传那样有值了，除非手动赋值，而文件的改变删除等变动当然由on-change事件处理比较合适，而且我试了多次，其他地方还是会出现校验不通过的情况，如下图：

    //el-upload组件里绑定的事件（可以参开上面template）
    handleChange (file, fileList) {
      this.file = fileList;
      this.$set(this.collectionInfos, "resource_url",file.url);
    },

这样就解决了。

专线服务服务器托管 linux 向前查找 element-ui 步步撤销 element-ui dialog组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58524.html

步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

ZoomQuiet 2019-08-29 17:08 评论0 收藏0
步步向前之webpack

摘要：最近准备系统地学习，这篇文章将持续更新，记录自己在使用中遇到的问题踩过的坑等，小白的错误不入法眼，掠过就好。字符串形式对象形式行内写法多个之间用分割。最近准备系统地学习webpack，这篇文章将持续更新，记录自己在使用webpack中遇到的问题、踩过的坑等，小白的错误不入法眼，掠过就好。常见用法 module 的 loader 属性与 use 属性联系查阅后，有说 webpa...

luffyZh 2019-08-26 10:24 评论0 收藏0
ElementUI的构建流程

摘要：下面一步步拆解上述流程。切换至分支检测本地和暂存区是否还有未提交的文件检测本地分支是否有误检测本地分支是否落后远程分支发布发布检测到在分支上没有冲突后，立即执行。背景最近一直在着手做一个与业务强相关的组件库，一直在思考要从哪里下手，怎么来设计这个组件库，因为业务上一直在使用ElementUI（以下简称Element），于是想参考了一下Element组件库的设计，看看Element构...

wudengzan 2019-08-23 12:01 评论0 收藏0
饿了么组件库，element-ui开发精美的后台管理系统系列之（一）开发伸缩菜单

摘要：先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的的单页面后台管理程序。涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的，只需要v-i...

whlong 2019-08-21 16:23 评论0 收藏0