8）表格和選擇框

再企業背景的編寫中，表格占據很大比重，是以UI提供的Table表格格外靈活

我們看下

1、表格

<Table :columns="columns_v" :data="data_v"></Table>

1) v-bind:columns="columns_v" ==> 表結構定義，表頭顯示資料
  columns_v是由對象組成的清單， 每個對象{title:xxx, key:xxx}
  title -- 表頭資料,key -- 表格中真實資料字段1, solt -- 表格中真實資料字段2           

Table元件屬性:

    stripe => 屬性:使表格斑馬紋間隔顯示
    border => 屬性:是表格顯示邊框
    height => 指定表格高度, 自動固定表頭, 提供垂直滾動條
    width => 指定表格寬帶, 自動固定表頭, 提供水準滾動條
    row-class=name => 設定顯示行的特殊樣式
    columns_v中className => 設定顯示列的特殊樣式
    data_v中的cellClassName =》 設定顯示單元格的特殊樣式
    ref => 選中的資料存儲到該變量, select_v 對象為this.$refs.select_v
    loading => 可以是true/false, 表示窗體正在加載

columns_v中的其他屬性

    fixex: 'left'或者'right', 固定列在左或者右
    width: 指定列的寬度
    align: 指定表頭的位置: 'center','left','right'
    sortable: true 開啟該列的排序
    filters: 進行篩選, 接受一個數組

高亮行

    highlight-row => 屬性:開啟選中行
    配合@on-current-change事件,事件傳回 currentRow和oldCurrentRow 上一行資料

多選行

    type: => 開啟全選模式'selection'
    配合@on-select事件,事件為選中行；@on-select-all事件,事件為全選中
    @on-selection-change事件, 選中項更改

3.2.0版本支援solt寫法：比如           

### 2、選擇框

><Switch v-model="switch1" @on-change="change" />

    value ==> 使用v-model版定屬性變量
    size ==> 大小選項, 可以是small,large，預設是中等
    disabled ==> 屬性: 禁用切換開關
    loading ==> 屬性: 顯示加載狀态

加載中的狀态: <Switch loading :value="true" />,自定義内容