iview/examples/routers/table.vue

<!--<template>-->
    <!--<div>-->
        <!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->
            <!--<div slot="loading">-->
                <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
                <!--<div>Loading</div>-->
            <!--</div>-->
        <!--</Table>-->
        <!--<br><br>-->
        <!--<Button @click="handleClear">clear</Button>-->
        <!--<Button @click="loading = !loading">Loading</Button>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
    <!--export default {-->
        <!--data () {-->
            <!--return {-->
                <!--loading: false,-->
                <!--columns3: [-->
                    <!--{-->
                        <!--title: '姓名',-->
                        <!--key: 'name',-->
                        <!--width: 100,-->
                        <!--fixed: 'left'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '年龄',-->
                        <!--key: 'age',-->
                        <!--width: 100-->
                    <!--},-->
                    <!--{-->
                        <!--title: '省份',-->
                        <!--key: 'province',-->
                        <!--width: 100-->
                    <!--},-->
                    <!--{-->
                        <!--title: '市区',-->
                        <!--key: 'city',-->
                        <!--width: 100-->
                    <!--},-->
                    <!--{-->
                        <!--title: '地址',-->
                        <!--key: 'address',-->
                        <!--width: 200-->
                    <!--},-->
                    <!--{-->
                        <!--title: '邮编',-->
                        <!--key: 'zip',-->
                        <!--width: 100-->
                    <!--},-->
                    <!--{-->
                        <!--title: '操作',-->
                        <!--key: 'action',-->
                        <!--fixed: 'right',-->
                        <!--width: 120,-->
                        <!--render: (h, params) => {-->
                            <!--return h('div', [-->
                                <!--h('Button', {-->
                                    <!--props: {-->
                                        <!--type: 'text',-->
                                        <!--size: 'small'-->
                                    <!--}-->
                                <!--}, '查看'),-->
                                <!--h('Button', {-->
                                    <!--props: {-->
                                        <!--type: 'text',-->
                                        <!--size: 'small'-->
                                    <!--}-->
                                <!--}, '编辑')-->
                            <!--]);-->
                        <!--}-->
                    <!--}-->
                <!--],-->
                <!--data1: [-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--}-->
                <!--]-->
            <!--}-->
        <!--},-->
        <!--methods: {-->
            <!--handleClear () {-->
                <!--this.$refs.table.clearCurrentRow();-->
            <!--},-->
            <!--handleChange (newData, oldData) {-->
<!--//                console.log(newData, oldData)-->
            <!--},-->
            <!--rc (data, index) {-->
                <!--console.log(data, index);-->
            <!--}-->
        <!--}-->
    <!--}-->
<!--</script>-->

<!--<style scoped>-->
    <!--.layout{-->
        <!--border: 1px solid #d7dde4;-->
        <!--background: #f5f7f9;-->
        <!--position: relative;-->
        <!--border-radius: 4px;-->
        <!--overflow: hidden;-->
    <!--}-->
    <!--.layout-breadcrumb{-->
        <!--padding: 10px 15px 0;-->
    <!--}-->
    <!--.layout-content{-->
        <!--min-height: 200px;-->
        <!--margin: 15px;-->
        <!--overflow: hidden;-->
        <!--background: #fff;-->
        <!--border-radius: 4px;-->
    <!--}-->
    <!--.layout-content-main{-->
        <!--padding: 10px;-->
    <!--}-->
    <!--.layout-copy{-->
        <!--text-align: center;-->
        <!--padding: 10px 0 20px;-->
        <!--color: #9ea7b4;-->
    <!--}-->
    <!--.layout-menu-left{-->
        <!--background: #464c5b;-->
    <!--}-->
    <!--.layout-header{-->
        <!--height: 60px;-->
        <!--background: #fff;-->
        <!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
    <!--}-->
    <!--.layout-logo-left{-->
        <!--width: 90%;-->
        <!--height: 30px;-->
        <!--background: #5b6270;-->
        <!--border-radius: 3px;-->
        <!--margin: 15px auto;-->
    <!--}-->
    <!--.layout-ceiling-main a{-->
        <!--color: #9ba7b5;-->
    <!--}-->
    <!--.layout-hide-text .layout-text{-->
        <!--display: none;-->
    <!--}-->
    <!--.ivu-col{-->
        <!--/*transition: width .2s ease-in-out;*/-->
    <!--}-->
<!--</style>-->
<!--<template>-->
    <!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->
        <!--<Row type="flex">-->
            <!--<Col :span="spanLeft" class="layout-menu-left">-->
                <!--<Menu active-name="1" theme="dark" width="auto">-->
                    <!--<div class="layout-logo-left"></div>-->
                    <!--<MenuItem name="1">-->
                        <!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->
                        <!--<span class="layout-text">选项 1</span>-->
                    <!--</MenuItem>-->
                    <!--<MenuItem name="2">-->
                        <!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->
                        <!--<span class="layout-text">选项 2</span>-->
                    <!--</MenuItem>-->
                    <!--<MenuItem name="3">-->
                        <!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->
                        <!--<span class="layout-text">选项 3</span>-->
                    <!--</MenuItem>-->
                <!--</Menu>-->
            <!--</Col>-->
            <!--<Col :span="spanRight">-->
                <!--<div class="layout-header">-->
                    <!--<Button type="text" @click="toggleClick">-->
                        <!--<Icon type="navicon" size="32"></Icon>-->
                    <!--</Button>-->
                <!--</div>-->
                <!--<div class="layout-breadcrumb">-->
                    <!--<Breadcrumb>-->
                        <!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->
                        <!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->
                        <!--<BreadcrumbItem>某应用</BreadcrumbItem>-->
                    <!--</Breadcrumb>-->
                <!--</div>-->
                <!--<div class="layout-content">-->
                    <!--<div class="layout-content-main">-->
                        <!--<Table stripe :columns="columns1" :data="data1"></Table>-->
                    <!--</div>-->
                    <!--<hr style="margin: 10px 0;" />-->
                    <!--<div class="layout-content-main">-->
                        <!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->
                        <!--<i-button type="primary" size="large" @click="exportCSV">-->
                            <!--<icon type="ios-download-outline"></icon> Export to CSV-->
                        <!--</i-button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</Col>-->
        <!--</Row>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
    <!--export default {-->
        <!--data () {-->
            <!--return {-->
                <!--spanLeft: 5,-->
                <!--spanRight: 19,-->
                <!--columns1: [-->
                    <!--{-->
                        <!--title: '姓名',-->
                        <!--key: 'name'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '年龄',-->
                        <!--key: 'age'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '地址',-->
                        <!--key: 'address'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '姓名',-->
                        <!--key: 'name'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '年龄',-->
                        <!--key: 'age'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '地址',-->
                        <!--key: 'address'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '姓名',-->
                        <!--key: 'name'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '年龄',-->
                        <!--key: 'age'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '地址',-->
                        <!--key: 'address'-->
                    <!--}-->
                <!--],-->
                <!--data1: [-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--}-->
                <!--],-->
                <!--columns2: [-->
                    <!--{-->
                        <!--title: '姓名',-->
                        <!--key: 'name'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '年龄',-->
                        <!--key: 'age'-->
                    <!--},-->
                    <!--{-->
                        <!--title: '地址',-->
                        <!--key: 'address',-->
                        <!--render: (h) => {-->
                            <!--return h('Button', {-->
                                <!--nativeOn: {-->
                                    <!--click: (event) => {-->
                                        <!--console.log(2)-->
                                        <!--event.stopPropagation();-->
                                    <!--}-->
                                <!--}-->
                            <!--}, 'click')-->
                        <!--}-->
                    <!--}-->
                <!--],-->
                <!--data2: [-->
                    <!--{-->
                        <!--name: '王小明',-->
                        <!--age: 18,-->
                        <!--address: '北京市朝\n阳区芍药居'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '张小刚',-->
                        <!--age: 25,-->
                        <!--address: '北京市海,淀区西二旗'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '李小红',-->
                        <!--age: 30,-->
                        <!--address: '上海市浦东\r新区世纪大道'-->
                    <!--},-->
                    <!--{-->
                        <!--name: '周小伟',-->
                        <!--age: 26,-->
                        <!--address: '深圳市南山区深南大道'-->
                    <!--}-->
                <!--]-->
            <!--};-->
        <!--},-->
        <!--computed: {-->
            <!--iconSize () {-->
                <!--return this.spanLeft === 5 ? 14 : 24;-->
            <!--}-->
        <!--},-->
        <!--methods: {-->
            <!--toggleClick () {-->
                <!--if (this.spanLeft === 5) {-->
                    <!--this.spanLeft = 2;-->
                    <!--this.spanRight = 22;-->
                <!--} else {-->
                    <!--this.spanLeft = 5;-->
                    <!--this.spanRight = 19;-->
                <!--}-->
            <!--},-->
            <!--exportCSV () {-->
                <!--this.$refs.csvTable.exportCsv({-->
                    <!--filename: '原始数据',-->
                    <!--separator: ';',-->
                    <!--quoted: true-->
                <!--});-->
            <!--},-->
            <!--cc () {-->
                <!--console.log(1)-->
            <!--}-->
        <!--}-->
    <!--};-->
<!--</script>-->

<template>
    <Table border :columns="columns6" :data="data5" @on-filter-change="cc"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns6: [
                    {
                        title: '日期',
                        key: 'date'
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        filters: [
                            {
                                label: '大于25岁',
                                value: 1
                            },
                            {
                                label: '小于25岁',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.age > 25;
                            } else if (value === 2) {
                                return row.age < 25;
                            }
                        }
                    },
                    {
                        title: '地址',
                        key: 'address',
                        filters: [
                            {
                                label: '北京',
                                value: '北京'
                            },
                            {
                                label: '上海',
                                value: '上海'
                            },
                            {
                                label: '深圳',
                                value: '深圳'
                            }
                        ],
                        filterMethod (value, row) {
                            return row.address.indexOf(value) > -1;
                        }
                    }
                ],
                data5: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居',
                        date: '2016-10-03'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        date: '2016-10-01'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        date: '2016-10-02'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        date: '2016-10-04'
                    }
                ]
            }
        },
        methods: {
            cc (dd) {
                console.log(dd);
            }
        }
    }
</script>