128 lines
2.6 KiB
Markdown
128 lines
2.6 KiB
Markdown
# Examples
|
||
|
||
## 列表页最小骨架（Vue2 + Element UI）
|
||
|
||
```vue
|
||
<template>
|
||
<div class="page-wrap">
|
||
<el-form :inline="true" :model="queryForm">
|
||
<el-form-item label="关键词">
|
||
<el-input v-model="queryForm.keyword" clearable />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table :data="tableData" v-loading="loading" border>
|
||
<el-table-column prop="id" label="ID" width="100" />
|
||
<el-table-column prop="name" label="名称" min-width="160" />
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
:current-page="queryForm.pageNum"
|
||
:page-size="queryForm.pageSize"
|
||
:total="total"
|
||
layout="total, prev, pager, next"
|
||
@current-change="handlePageChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getList } from "@/api/demo";
|
||
|
||
export default {
|
||
name: "DemoList",
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
tableData: [],
|
||
total: 0,
|
||
queryForm: {
|
||
keyword: "",
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.fetchList();
|
||
},
|
||
methods: {
|
||
async fetchList() {
|
||
this.loading = true;
|
||
try {
|
||
const res = await getList(this.queryForm);
|
||
this.tableData = res?.data?.list || [];
|
||
this.total = res?.data?.total || 0;
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
handleSearch() {
|
||
this.queryForm.pageNum = 1;
|
||
this.fetchList();
|
||
},
|
||
handleReset() {
|
||
this.queryForm.keyword = "";
|
||
this.queryForm.pageNum = 1;
|
||
this.fetchList();
|
||
},
|
||
handlePageChange(page) {
|
||
this.queryForm.pageNum = page;
|
||
this.fetchList();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
|
||
## API 文件示例
|
||
|
||
```js
|
||
import request from "@/utils/request";
|
||
|
||
export function getList(params) {
|
||
return request({
|
||
url: "/api/demo/list",
|
||
method: "get",
|
||
params
|
||
});
|
||
}
|
||
|
||
export function createItem(data) {
|
||
return request({
|
||
url: "/api/demo/create",
|
||
method: "post",
|
||
data
|
||
});
|
||
}
|
||
```
|
||
|
||
## 表单弹窗处理示例
|
||
|
||
```js
|
||
methods: {
|
||
openDialog(row) {
|
||
this.dialogVisible = true;
|
||
this.formData = row
|
||
? { id: row.id, name: row.name }
|
||
: { id: "", name: "" };
|
||
},
|
||
async handleSubmit() {
|
||
this.submitLoading = true;
|
||
try {
|
||
await this.$refs.formRef.validate();
|
||
await createItem(this.formData);
|
||
this.$message.success("保存成功");
|
||
this.dialogVisible = false;
|
||
this.fetchList();
|
||
} finally {
|
||
this.submitLoading = false;
|
||
}
|
||
}
|
||
}
|
||
```
|