网页游戏源码交易平台_网店logo设计图片免费_朋友圈营销_百度输入法下载

<template><div style="padding: 15px"><el-card><el-form :inline="true" ref="formRef" :model="dynamicForm"><el-form-itemv-for="(column, index) in dynamicForm.columns":key="column.field + '.' + index":label="column.label":prop="column.prop"><el-input v-model="column.value" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(formRef)"> 查询 </el-button><el-button @click="resetForm(formRef)">重置</el-button></el-form-item></el-form><div class="table"><el-button type="primary" size="small" @click="handleRefresh">刷新</el-button><el-button type="success" size="small" @click="handleSave">添加</el-button><el-button type="warning" size="small" @click="handleUpdate">编辑</el-button><el-button type="danger" size="small" @click="handleRemove">删除</el-button><el-button type="info" size="small" @click="handleExport">导出</el-button><el-tableref="tableRef":data="tableData"stripestyle="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" :selectable="selectable" width="55" /><el-table-columnv-for="column in tableColumn":key="column.field":prop="column.prop":label="column.label":width="column.width"/><el-table-column fixed="right" label="操作" min-width="120"><template #default="scope"><el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)">查看</el-button><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div><div class="page"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="pageSizes"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></el-card></div>
</template>
<style lang="css">
.page {padding: 15px;
}
</style>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, TableInstance } from 'element-plus'interface FormColumn {field: stringlabel: stringprop: stringwidth: stringvalue: string
}interface TableColumn {field: stringlabel: stringprop: stringwidth: string
}const formRef = ref<FormInstance>()
const dynamicForm = reactive<{columns: FormColumn[]
}>({columns: [{prop: 'date',label: 'date',field: 'date',width: 'auto',value: '',},{prop: 'name',label: 'name',field: 'name',width: 'auto',value: '',},{prop: 'address',label: 'address',field: 'address',width: 'auto',value: '',},],
})const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')console.log(dynamicForm)} else {console.log('error submit!', fields)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returndynamicForm.columns?.forEach((column) => {column.value = ''})formEl.resetFields()
}const tableRef = ref<TableInstance>()const selection = ref<object[]>([])// eslint-disable-next-line @typescript-eslint/no-unused-vars
const selectable = (row: object) => []const handleSelectionChange = (val: object[]) => {selection.value = val
}const tableColumn: TableColumn[] = [{prop: 'date',label: 'date',field: 'date',width: 'auto',},{prop: 'name',label: 'name',field: 'name',width: 'auto',},{prop: 'address',label: 'address',field: 'address',width: 'auto',},
]
const 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',},
]const handleRefresh = () => {}const handleSave = () => {}const handleUpdate = () => {if (selection.value.length !== 1) {console.log(selection.value)}
}const handleRemove = () => {if (selection.value.length === 0) {console.log(selection.value)}
}const handleExport = () => {if (selection.value.length === 0) {console.log(selection.value)}
}const handleDetail = (index: number, row: object) => {console.log(index, row)
}
const handleEdit = (index: number, row: object) => {console.log(index, row)
}
const handleDelete = (index: number, row: object) => {console.log(index, row)
}const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 50, 100])
const total = ref(1000)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}
</script>