<template>
	<el-main>
		<el-card shadow="never">
			<x-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
				<el-table :data="tableData" border stripe style="width: 100%">
					<el-table-column prop="date" label="Date" width="180" />
					<el-table-column prop="name" label="Name" width="180" />
					<el-table-column prop="address" label="Address" />
				</el-table>
			</x-water-mark>
		</el-card>
		<el-card shadow="never" style="margin-top: 15px;">
			<el-button type="primary" @click="create">创建水印</el-button>
			<el-button type="primary" @click="clear">移除水印</el-button>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'watermark',
		data() {
			return {
				tableData: [
					{
						date: '2016-05-03',
						name: 'Tom',
						address: 'No. 189, Grove St, Los Angeles',
					},
					{
						date: '2016-05-02',
						name: 'Tom',
						address: 'No. 189, Grove St, Los Angeles',
					},
					{
						date: '2016-05-04',
						name: 'Tom',
						address: 'No. 189, Grove St, Los Angeles',
					},
					{
						date: '2016-05-01',
						name: 'Tom',
						address: 'No. 189, Grove St, Los Angeles',
					},
				]
			}
		},
		mounted() {

		},
		methods: {
			create(){
				this.$refs.wm.create()
			},
			clear(){
				this.$refs.wm.clear()
			}
		}
	}
</script>

<style>
</style>
