test/routers/table.vue

<style>
    body{
        height: auto;
    }
</style>
<template>
    <div>
        <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
        <br>
        <i-table
                width="450"
                :height="height"
                stripe
                border
                highlight-row
                :show-header="true"
                :columns="columns"
                :data="data"
                :row-class-name="rowClsName"
                @on-current-change="current"
                @on-select="select"
                @on-selection-change="schange"
                @on-select-all="sall"
                @on-sort-change="sortChange">
            <!--<div slot="header">表格标题</div>-->
            <!--<div slot="footer">表格标题</div>-->
        </i-table>
        <br>
        <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
    </div>
</template>
<script>
    export default {
        props: {
        
        },
        data () {
            return {
                columns: [
                    {
                        type: 'selection',
                        width: 50,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 50
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'left',
                        fixed: 'left',
                        sortable: true,
                        width: 100,
                        filters: [
                            {
                                label: '家',
                                value: 'home'
                            },
                            {
                                label: '公司',
                                value: 'company'
                            }
                        ],
                    },
                    {
                        title: '标签',
                        key: 'tag',
                        width: 100,
                        filters: [
                            {
                                label: '家',
                                value: 'home'
                            },
                            {
                                label: '公司',
                                value: 'company'
                            }
                        ],
                        render (row) {
                            const type = `${row.tag}` === '家' ? 'green' : 'red';
                            return `<tag color="${type}">${row.tag}</tag>`;
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        align: 'right',
//                        fixed: 'left',
                        sortable: 'custom',
                        width: 100,
                        filters: [
                            {
                                label: '家',
                                value: 'home'
                            },
                            {
                                label: '公司',
                                value: 'company'
                            }
                        ],
//                        render (row) {
//                            return `<i-button>${row.age}</i-button>`
//                        }
                    },
                    {
                        title: '地址',
                        key: 'address',
                        align: 'center',
//                        fixed: 'right',
                        width: 100,
//                        render (row, column, index) {
//                            if (row.edit) {
//                                return `<i-input :value.sync="data[${index}].name"></i-input>`;
//                            } else {
//                                return `<Tooltip content="${row.address}"><i-button @click="show(${index})">${row.name}</i-button></Tooltip>`;
//                            }
//                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render (row, column, index) {
                            return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
//                            return `<a>${row.name}</a>`
                        }
                    }
                ],
                data: [
                    {
                        name: '梁灏',
                        age: 25,
                        address: '北京市朝阳区',
                        edit: false,
                        tag: '家'
                    },
                    {
                        name: '段模',
                        age: 21,
                        address: '北京市海淀区',
                        edit: false,
                        tag: '公司'
                    },
                    {
                        name: '刘天娇',
                        age: 27,
                        address: '北京市东城区',
                        edit: false,
                        tag: '公司'
                    },
                    {
                        name: '胡国伟',
                        age: 22,
                        address: '北京市西城区',
                        edit: false,
                        tag: '家'
                    }
                ],
                height: 200
            }
        },
        computed: {
        
        },
        methods: {
            show (name) {
                this.$Message.info(name);
            },
            edit (index) {
//                this.data[index].edit = true;
                this.$Message.info(this.data[index].name);
            },
            current (newData, oldData) {
                console.log(newData);
                console.log(oldData);
            },
            select (a,b){
//                console.log(a);
//                console.log(b);
            },
            schange (a) {
//                console.log(a)
            },
            sall (a) {
//                console.log(a)
            },
            rowClsName (row, index) {
                if (index == 1) {
                    return 'row-success';
                } else {
                    return '';
                }
            },
            sortChange (data) {
                console.log(data)
            }
        },
        ready () {
            setTimeout(() => {
//                this.columns[3].width = 300;
//                this.columns[2].width = 150;
//                return;
//                this.height = 150;
//                this.data.push({
//                    name: '刘天娇2',
//                    age: 272,
//                    address: '北京市东城区2',
//                    edit: false
//                });
//                this.data.splice(0, 1)
//                this.columns.splice(2,1)
            }, 2000);
        }
    }
</script>