<template>
    <div class="ht-base-table-fixed-head-demo">
        <ht-base-table height="200" :columns="columns1" :data="data1">
            <template slot-scope="{ row }" slot="href">
                <a :href="row.url" target="_black" style="cursor:pointer;">{{row.name}}</a>
            </template>
            <template slot-scope="{ row }" slot="number">
                <div style="cursor:pointer;">{{row.number.toLocaleString()}}</div>
            </template>
            <template slot-scope="{ row }" slot="money">
                <template v-if="row.money < 0">
                    <icon style="color:#F85555;" type="logo-yen"/>
                    <div style="cursor:pointer;color:#F85555;display:inline-block;">{{row.money.toLocaleString()}}</div>
                </template>
                <template v-else>
                    <icon style="color:#3BAB78;" type="logo-yen"/>
                    <div style="cursor:pointer;color:#3BAB78;display:inline-block;">{{row.money.toLocaleString()}}</div>
                </template>
            </template>
        </ht-base-table>
    </div>
</template>

<script type="text/jsx">
    export default {
        name: 'HtBaseTableFixedHeadDemo',
        data() {
            return {
                columns1: [
                    {
                        title: '序号',
                        align:'center',
                        type: 'index',
                        width:80
                    },
                    {
                        title: '链接',
                        slot: 'href'
                    },
                    {
                        title: '列名',
                        key: 'name'
                    },
                    {
                        title: '数字',
                        slot: 'number',
                        align:'right'
                    },
                    {
                        title: '金额',
                        slot: 'money',
                        align:'right'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align:'center',
                    }
                ],
                data1: [
                    {
                        href: 'Button',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-03'
                    },
                    {
                        href: 'Poptip',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-01'
                    },
                    {
                        href: 'Menu',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-02'
                    },
                    {
                        href: 'Page',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>
<style>
    .ht-base-table-fixed-head-demo {

    }
</style>

