步步向前之Element-UI

Table

固定表头

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

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

这里文档只给了一种固定高度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同理。
例如：

<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 }

<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其实可以不写

自定义表头

文档解释比较简单：

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结构）