步步向前之Element-UI-CSDN博客

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

自定义表头

文档解释比较简单：

实现效果：
图片描述

鼠标移上去会有提示文字弹出，这里用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;

步步向前之Element-UI