<template>
	<t-layout-page>
		<t-layout-page-item>
			<t-table title="基本使用" :table="table" :columns="table.columns" />
		</t-layout-page-item>
	</t-layout-page>
</template>

<script>
export default {
	data() {
		let self = this
		return {
			table: {
				data: [
					{
						id: '1',
						date: '2019-09-25',
						name: '张三',
						status: '2',
						address: '广东省广州市天河区'
					},
					{
						id: '2',
						date: '2019-09-26',
						name: '张三1',
						status: '1',
						address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
					},
					{
						id: '3',
						date: '2019-09-27',
						name: '张三2',
						status: '3',
						address: '广东省广州市天河区3'
					}
				],
				columns: [
					{ prop: 'name', label: '姓名', minWidth: '100', sort: true },
					{ prop: 'date', label: '日期', minWidth: '180', sort: true },
					{ prop: 'address', label: '地址', minWidth: '220', sort: true, noShowTip: true },
					{ prop: 'date', label: '日期', minWidth: '180', sort: true },
					{
						prop: 'address',
						label: '地址',
						minWidth: '220',
						customRender: {
							comps: [
								{
									comp: 'el-link',
									text: '编辑',
									bind: {
										type: 'primary'
									},
									event(scope) {
										return {
											click() {
												self.handleEditTable('编辑', scope.row)
											}
										}
									}
								},
								{
									comp: 'el-popconfirm',
									bind: {
										title: '确认删除该条数据？'
									},
									event(scope) {
										return {
											confirm() {
												self.handledeleteTable(scope.row)
											}
										}
									},
									child: [
										{
											slot: 'reference',
											comp: 'el-link',
											text: '删除',
											bind: {
												type: 'primary'
											}
										}
									]
								}
							]
						}
					}
				]
			}
		}
	},
	methods: {
		handleEditTable(val, type) {
			console.log('编辑', val, type)
		},
		handledeleteTable(val) {
			console.log('删除', val)
		}
	}
}
</script>
