View Design Playground

组合式选项式
App.vue
Import Map
xxxxxxxxxx
 
<template>
    <Table row-key="id" :load-data="handleLoadData" :columns="columns" :data="data" border :row-class-name="rowClassName"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'Name',
                        key: 'name',
                        tree: true
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: [
                    {
                        id: '100',
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        id: '101',
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        _loading: false,
                        children: []
                    },
                    {
                        id: '102',
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        id: '103',
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ]
            }
        },
        methods: {
          rowClassName(row) {
            if(row.isChildren) {
              return 'children-row';
            }
            return 'parent-row';
          },
            handleLoadData (item, callback) {
                setTimeout(() => {
                    const data = [
                        {
                            id: '10100',
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            isChildren: true,
                        },
                        {
                            id: '10101',
                            name: 'Joe Blackn',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            isChildren: true,
                        }
                    ];
                    callback(data);
                }, 2000);
            }
        }
    }
</script>
<style>
  .parent-row td{
    background-color: blue !important;
    color: #fff;
  }
  .children-row td{
    background-color: #eee
  }
</style>
​