@zhangjr0575/el-table-pack

<template>
	<el-table-pro :columns="columns" :optionsRequest="optionsRequest" :request="request" selectable @selection-change="onSelectionChange">
		<!-- 使用表格自定义作用域插槽 -->
		<template slot="action" slot-scope="scope">
			<el-button type="text">查看</el-button>
		</template>
		<div slot="tool">
			<el-button type="primary" icon="el-icon-download" size="mini" plain>导入</el-button>
			<el-button type="primary" icon="el-icon-upload2" size="mini">导出</el-button>
		</div>
		<div slot="alert">
			当前选中
			<el-button type="text">{{ selectedTotal }}</el-button
			>条
		</div>
	</el-table-pro>
</template>

<script>
import ElTablePro from 'el-table-pack';
import { TableColumn, Button } from 'element-ui';

export default {
	name: 'Home',
	components: {
		ElTablePro,
		ElButton: Button,
		ElTableColumn: TableColumn
	},
	data() {
		return {
			columns: [
				{
					name: 'id',
					title: '任务编号',
					sort: 1
				},
				{
					name: 'name',
					title: '任务名称',
					sort: 2,
					headerTooltip: '任务名称提示信息',
					props: {
						align: 'center'
					}
				},
				{
					name: 'userName',
					title: '发布人',
					hideInSearch: true,
					props: {
						align: 'center'
					}
				},
				{
					name: 'time',
					title: '发布时间',
					sort: 5,
					hideInTable: true,
					formItemType: 'datePicker',
					formItemProps: {
						type: 'daterange',
						align: 'center'
						// "start-placeholder": "1开始日期",
						// "end-placeholder": "1结束日期"
					}
				},
				{
					name: 'endDate',
					title: '截止日期',
					formItemType: 'datePicker',
					sort: 6,
					props: {
						align: 'center'
					}
				},
				{
					name: 'income',
					title: '金额',
					hideInSearch: true,
					props: {
						align: 'center'
					}
				},
				{
					name: 'status',
					title: '状态',
					sort: 4,
					optionsKey: 'task_user_status',
					props: {
						align: 'center'
					}
				},
				{
					name: 'status',
					title: '固定下拉项',
					sort: 5,
					hideInTable: true,
					formItemType: 'select',
					options: [
						{
							label: '选项1',
							value: 1
						},
						{
							label: '选项2',
							value: 2
						}
					],
					props: {
						align: 'center'
					}
				},
				{
					name: 'action',
					title: '操作',
					hideInSearch: true
				}
			],
			selectedTotal: 0
		};
	},
	methods: {
		request(searchQuery, pageNum, pageSize) {
			return new Promise(function (resolve) {
				console.log('查询参数:', searchQuery);
				console.log('当前页码:', pageNum, '分页数量:', pageSize);
				resolve({
					rows: [
						{
							id: '2021051101',
							name: '第一条任务名称',
							userName: '张三',
							time: '2021-05-11',
							income: 200.56,
							endDate: '2021-05-30',
							status: 1
						},
						{
							id: '2021051102',
							name: '第二条任务名称',
							userName: '李四',
							time: '2021-05-12',
							income: 200.76,
							endDate: '2021-05-30',
							status: 1
						}
					],
					total: 2
				});
			});
		},
		optionsRequest(dictKey) {
			return new Promise(function (resolve) {
				console.log(`查询${dictKey}的字典项`);
				setTimeout(function () {
					resolve([
						{
							label: '选项1',
							value: 1
						},
						{
							label: '选项2',
							value: 2
						},
						{
							label: '选项3',
							value: 3
						},
						{
							label: '选项4',
							value: 4
						}
					]);
				}, 200);
			});
		},
		onSearch(query) {
			console.log('触发查询条件:', query);
		},
		onPageChange(data) {
			console.log('页码信息发生变化:', data);
		},
		onSelectionChange(selectedRows) {
			this.selectedTotal = selectedRows.length;
		}
	}
};
</script>

<div slot="tool">
	<el-button type='primary' icon='el-icon-download' size='mini' plain>导入</el-button>
	<el-button type='primary' icon='el-icon-upload2' size='mini' style='margin-right: 20px'>导出</el-button>
</div>

<el-form-item slot="myFormItem" slot-scope="{ option, formData }" :label="option.title" :prop="option.name">
	<CustomComponent v-model="formData[option.name]"></CustomComponent>
</el-form-item>