Table Demo
基础列表内容，复制即用
（.vue）
<script lang="ts" setup>
import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
import type { FormInstance, FormRules } from "element-plus"
import { cloneDeep } from "lodash-es"
import { fakeData } from "./fakeData"
import { ElMessageBox } from "element-plus"
// #region Type
interface TableData {
createTime: string
email: string
id: string
phone: string
roles: string
status: boolean
username: string
}
interface PaginationData {
total?: number
currentPage?: number
pageSizes?: number[]
pageSize?: number
layout?: string
}
interface CreateOrUpdateTableRequestData {
id?: string
username: string
password?: string
}
// #endregion
const loading = ref<boolean>(false)
// #region 分页
const paginationData: PaginationData = reactive({
total: 0,
currentPage: 1,
pageSizes: [10, 20, 50],
pageSize: 10,
layout: "total, sizes, prev, pager, next, jumper"
})
// 改变当前页码
function handleCurrentChange (value: number) {
paginationData.currentPage = value
}
// 改变每页显示条数
function handleSizeChange (value: number) {
paginationData.pageSize = value
}
// #endregion
// #region 表单增 改
const DEFAULT_FORM_DATA: CreateOrUpdateTableRequestData = {
id: undefined,
username: "",
password: ""
}
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const formData = ref<CreateOrUpdateTableRequestData>(cloneDeep(DEFAULT_FORM_DATA))
const formRules: FormRules<CreateOrUpdateTableRequestData> = {
username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
password: [{ required: true, trigger: "blur", message: "请输入密码" }]
}
function handleCreateOrUpdate() {
formRef.value?.validate((valid) => {
if (!valid) {
ElMessage.error("表单校验不通过")
return
}
// loading.value = true
// const api = formData.value.id === undefined ? createTableDataApi : updateTableDataApi
// api(formData.value).then(() => {
// ElMessage.success("操作成功")
// dialogVisible.value = false
// getTableData()
// }).finally(() => {
// loading.value = false
// })
})
}
function resetForm() {
formRef.value?.clearValidate()
formData.value = cloneDeep(DEFAULT_FORM_DATA)
}
// #endregion
// #region 列表 改
function handleUpdate(row: TableData) {
dialogVisible.value = true
formData.value = cloneDeep(row)
}
// #endregion
// #region 删
function handleDelete(row: TableData) {
ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// deleteTableDataApi(row.id).then(() => {
// ElMessage.success("删除成功")
// getTableData()
// })
})
}
// #endregion
// #region 查
const tableData = ref<TableData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
username: "",
phone: ""
})
function getTableData() {
// // 假数据
// tableData.value = fakeData
// paginationData.total = fakeData.length
// loading.value = true
// getTableDataApi({
// currentPage: paginationData.currentPage,
// size: paginationData.pageSize,
// username: searchData.username || undefined,
// phone: searchData.phone || undefined
// }).then(({ data }) => {
// paginationData.total = data.total
// tableData.value = data.list
// }).catch(() => {
// tableData.value = []
// }).finally(() => {
// loading.value = false
// })
}
function handleSearch() {
paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
function resetSearch() {
searchFormRef.value?.resetFields()
handleSearch()
}
// #endregion
// #region 批量删除
const multipleSelection = ref<TableData[]>([])
const handleSelectionChange = (val: TableData[]) => {
multipleSelection.value = val
}
function deleteSelection () {
ElMessageBox.confirm(`正在批量删除用户，确认删除？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log(multipleSelection)
// deleteTableDataApi(row.id).then(() => {
// ElMessage.success("删除成功")
// getTableData()
// })
})
}
// #endregion
// 监听分页参数的变化
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>
<template>
<div>
<!-- 查询 -->
<el-card v-loading="loading" shadow="never" class="search-wrapper m-b-20">
<el-form ref="searchFormRef" :inline="true" :model="searchData">
<el-form-item prop="username" label="用户名">
<el-input v-model="searchData.username" placeholder="请输入" />
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input v-model="searchData.phone" placeholder="请输入" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">
查询
</el-button>
<el-button :icon="Refresh" @click="resetSearch">
重置
</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 列表+新增+分页 -->
<el-card v-loading="loading" shadow="never">
<div class="flex-b m-b-20">
<div>
<el-button type="primary" :icon="CirclePlus" @click="dialogVisible = true">
新增用户
</el-button>
<el-button type="danger" :icon="Delete" @click="deleteSelection">
批量删除
</el-button>
</div>
<div>
<!-- <el-tooltip content="下载">
<el-button type="primary" :icon="Download" circle />
</el-tooltip> -->
<el-tooltip content="刷新当前页">
<el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
</el-tooltip>
</div>
</div>
<div class="m-b-20">
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="username" label="用户名" align="center" />
<el-table-column prop="roles" label="角色" align="center">
<template #default="scope">
<el-tag v-if="scope.row.roles === 'admin'" type="primary" effect="plain" disable-transitions>
admin
</el-tag>
<el-tag v-else type="warning" effect="plain" disable-transitions>
{{ scope.row.roles }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<el-table-column prop="status" label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status" type="success" effect="plain" disable-transitions>
启用
</el-tag>
<el-tag v-else type="danger" effect="plain" disable-transitions>
禁用
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column fixed="right" label="操作" width="150" align="center">
<template #default="scope">
<el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">
修改
</el-button>
<el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex-e">
<el-pagination
background
:layout="paginationData.layout"
:page-sizes="paginationData.pageSizes"
:total="paginationData.total"
:page-size="paginationData.pageSize"
:current-page="paginationData.currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-card>
<!-- 新增/修改 -->
<el-dialog
v-model="dialogVisible"
:title="formData.id === undefined ? '新增用户' : '修改用户'"
width="30%"
@closed="resetForm"
>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
<el-form-item prop="username" label="用户名">
<el-input v-model="formData.username" placeholder="请输入" />
</el-form-item>
<el-form-item v-if="formData.id === undefined" prop="password" label="密码">
<el-input v-model="formData.password" placeholder="请输入" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">
取消
</el-button>
<el-button type="primary" :loading="loading" @click="handleCreateOrUpdate">
确认
</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.search-wrapper :deep(.el-card__body) {
padding-bottom: 2px;
}
</style>