87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
|
|
|
<div>
|
|
<div>按钮</div>
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Button>Default</Button>
|
|
<Button type="primary">Primary</Button>
|
|
<Button type="dashed">Dashed</Button>
|
|
<Button type="text">Text</Button>
|
|
</Space>
|
|
<Space wrap>
|
|
<Button type="info">Info</Button>
|
|
<Button type="success">Success</Button>
|
|
<Button type="warning">Warning</Button>
|
|
<Button type="error">Error</Button>
|
|
</Space>
|
|
</Space>
|
|
<div>图标</div>
|
|
<Icon type="ios-checkmark" />
|
|
<div>
|
|
<Title>h1. View Design</Title>
|
|
<Title :level="2">h2. View Design</Title>
|
|
<Title :level="3">h3. View Design</Title>
|
|
<Title :level="4">h4. View Design</Title>
|
|
<Title :level="5">h5. View Design</Title>
|
|
</div>
|
|
<div>分页</div>
|
|
<Table border :columns="columns" :data="data"></Table>
|
|
<Page :total="100" show-sizer />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'msg',
|
|
data() {
|
|
return {
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
},
|
|
{
|
|
title: 'Address',
|
|
key: 'address',
|
|
},
|
|
],
|
|
data: [
|
|
{
|
|
name: 'John Brown',
|
|
age: 18,
|
|
address: 'New York No. 1 Lake Park',
|
|
date: '2016-10-03',
|
|
},
|
|
{
|
|
name: 'Jim Green',
|
|
age: 24,
|
|
address: 'London No. 1 Lake Park',
|
|
date: '2016-10-01',
|
|
},
|
|
{
|
|
name: 'Joe Black',
|
|
age: 30,
|
|
address: 'Sydney No. 1 Lake Park',
|
|
date: '2016-10-02',
|
|
},
|
|
{
|
|
name: 'Jon Snow',
|
|
age: 26,
|
|
address: 'Ottawa No. 2 Lake Park',
|
|
date: '2016-10-04',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|