步步向前之Element-UI

时间 2019-12-10

标签步步向前 element 繁體版

原文原文链接

Table

固定表头

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

<el-table
    :data="tableData3"
    height="250"
    border
    style="width: 100%">
...
</el-table>

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

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

点击事件

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

<el-table ref="tabFavourite" 
style="width: 100%" :height="tabHeight" 
border 
@row-dblclick="goTimeseries" 
@row-click="toggle"> 
</el-table>
...
<script>
export default {
    ...
    methods: {
        toggle ({ fromName, symbol }) {
          this.fromName = fromName;
          this.symbol = symbol;
          this.$refs.tabFavourite.setCurrentRow();
          // (`fromName`,`symbol`是row的键)
        },
        goTimeseries (row) {
          console.log(...row） 
        },
    }
}
</script>

配合vue过滤器

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

<el-table-column 
prop="platform.rise" 
label="24小时涨幅" 
sortable  
align="center">
     <template slot-scope="scope"><span v-color="scope.row.platform.rise">{{ scope.row.platform.rise | percent(2) | sign(scope.row.platform.change) | nvl('--')}}</span></template>
</el-table-column>
//scope.row是当前列的值，prop其实能够不写

自定义表头

文档解释比较简单：segmentfault

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

实现效果：
数组

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

无效方案：dom

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，并没有小图标，后边中括号结构里只能有一个（有待考证）。ide

可行方案：

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属性ui

滚动到第一行：

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

滚动到最后一行：

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

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

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

<el-upload
                  class="upload-demo"
                  action="/form/upload?secure=1"
                  :limit="uploadCount"
                  :multiple="false"
                  :file-list="file"
                  list-type="file"
                  accept=".jpg,.jpeg"
                  :before-upload="beforePicUpload"
                  :on-success="handlePicSuccess"
                  :on-remove="removePicSuccess"
                >
                  <el-button
                    size="small"
                    type="primary"
                  >点击上传</el-button>
                  <div
                    slot="tip"
                    class="el-upload__tip"
                  >只能上传jpg/jpeg文件，且不超过500kb</div>
                </el-upload>

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();
      });
}