步步向前之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結構）

表格滾動到頂部或底部（原連接）

$refs.table： 爲el-table設置的ref屬性

滾動到第一行：

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