el-table-v2

el-table-v2是一个基于Vue.js框架的表格组件，它提供了许多功能，例如：排序、分页、筛选等等。下面是一些关于el-table-v2的介绍和演示：

1. 如何使用el-table-v2？

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: 'Tom',
        age: 20,
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        name: 'Jerry',
        age: 18,
        address: 'No. 1001, Westlake Ave N, Seattle'
      }]
    }
  }
}
</script>

2. 如何使用el-table-v2实现分页？

<template>
  <el-table :data="tableData" :row-key="row => row.id"
    :default-sort="{prop: 'date', order: 'descending'}"
    :pagination="{
        total: 100,
        pageSize: 10,
        currentPage: 1
      }">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="date" label="Date" sortable></el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      };
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.tableData.push({
          id: i + 1,
          name: 'Item ' + (i + 1),
          date: new Date(2018, 9, 1, 0, 0, i)
        });
      }
    }
  };
</script>

3. 如何使用el-table-v2实现筛选？

<template>
  <div>
    <el-input v-model="filter" placeholder="请输入内容" style="margin-bottom: 20px;"></el-input>
    <el-table :data="tableData" :filters="filters" @filter-change="handleFilterChange">
      <el-table-column prop="name" label="Name" :filters="[{text: 'Tom', value: 'Tom'}, {text: 'Jerry', value: 'Jerry'}]" :filter-method="nameFilter"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: 'Tom',
        age: 20,
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        name: 'Jerry',
        age: 18,
        address: 'No. 1001, Westlake Ave N, Seattle'
      }],
      filters: {
        nameFilter: function(value, row) {
          return row.name === value;
        }
      },
      filter: ''
    }
  },
  methods: {
    handleFilterChange(filters) {
      this.filters = filters;
    },
    nameFilter(value, row) {
      return row.name.indexOf(value) !== -1;
    }
  }
}
</script>