iView 是一套基于 Vue.js 的開源 UI 組件庫毛俏，主要服務(wù)于 PC 界面的中后臺產(chǎn)品炭庙。官方網(wǎng)址傳送門。

本文是使用iView 的 Table 組件實現(xiàn)的簡單表格功能煌寇，包括列篩選焕蹄、排序，根據(jù)條件顯示或隱藏列功能阀溶。這里只給出效果圖和源代碼腻脏，相關(guān)API官方已非常詳盡，并提供了示例银锻，這里不做過多說明永品。

實現(xiàn)效果：

動態(tài)表格

源代碼：

<template>
  <Layout>
    <Header style="color: #fff">
      <Row type="flex" justify="space-between">
        <i-col>
          顯示斑馬紋 <i-switch v-model="isStripe"/>
        </i-col>
        <i-col>
          顯示邊框 <i-switch v-model="isBorder"/>
        </i-col>
        <i-col>
          顯示表頭 <i-switch v-model="isShowHeader"/>
        </i-col>
        <i-col>
          表格大小 <i-switch v-model="isLarge">
          <span slot="open">大</span>
          <span slot="close">小</span>
        </i-switch>
        </i-col>
        <i-col>
          是否可選： <i-switch v-model="isSelect"/>
        </i-col>
        <i-col>
          顯示序號: <i-switch v-model="isIndex"/>
        </i-col>
      </Row>
    </Header>
    <Content>
      <i-table
        :stripe="isStripe"
        :border="isBorder"
        :show-header="isShowHeader"
        :no-data-text="noDataText"
        :no-filtered-data-text="noFilteredDataText"
        :columns="computeCol"
        :data="tableData"
        :size="size"
      />
    </Content>
  </Layout>
</template>

<script>
export default {
  name: 'TableView',
  data () {
    return {
      columns: [
        {
          type: 'selection',
          width: 50
        },
        {
          title: '序號',
          type: 'index',
          key: 'index',
          align: 'right',
          width: 80
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '班級',
          key: 'className',
          filters: [
            {
              label: '一年級1班',
              value: '一年級1班'
            },
            {
              label: '一年級2班',
              value: '一年級2班'
            },
            {
              label: '一年級3班',
              value: '一年級3班'
            }
          ],
          filterMultiple: false,
          filterMethod: (value, row) => {
            return value === row.className
          }
        },
        {
          title: '年齡',
          key: 'age',
          align: 'right',
          sortable: true
        },
        {
          title: '分數(shù)',
          key: 'score',
          align: 'right',
          sortable: true
        }
      ],
      tableData: [
        {
          name: '小明',
          className: '一年級1班',
          age: 7,
          score: 99
        },
        {
          name: '小紅',
          className: '一年級1班',
          age: 6,
          score: 98
        },
        {
          name: '小娜',
          className: '一年級2班',
          age: 7,
          score: 100
        },
        {
          name: '小一',
          className: '一年級2班',
          age: 6,
          score: 100
        }
      ],
      isStripe: true,
      isBorder: true,
      isShowHeader: true,
      isLarge: true,
      isIndex: true,
      isSelect: true,
      size: 'large',
      noDataText: '無數(shù)據(jù)',
      noFilteredDataText: '無篩選數(shù)據(jù)'
    }
  },
  watch: {
    isLarge (newVal) {
      if (newVal) {
        this.size = 'large'
      } else {
        this.size = 'small'
      }
    }
  },
  computed: {
    computeCol () {
      let columns = this.columns
      if (!this.isIndex) {
        columns = columns.filter(col => col.type !== 'index')
      }
      if (!this.isSelect) {
        columns = columns.filter(col => col.type !== 'selection')
      }
      return columns
    }
  }
}
</script>