vue 之使用 iView table组件实现表格筛选、排序、动

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。官方网址传送门。

本文是使用iView 的 Table 组件实现的简单表格功能，包括列筛选、排序，根据条件显示或隐藏列功能。这里只给出效果图和源代码，相关API官方已非常详尽，并提供了示例，这里不做过多说明。

实现效果：

源代码：

<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: '分数',
          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: '无数据',
      noFilteredDataText: '无筛选数据'
    }
  },
  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>