前段時間貓哥在學習vue框架，這裏總結了一套利用vue + elementUI展示頁面數據的框架，開發人員可根據自身需求，對頁面進行擴展。
<template>
<div class="app-container">
<!-- 條件查詢 -->
<div class="filter-container">
<!-- 輸入框 -->
<el-input
v-model="listQuery.keyword"
placeholder="名稱關鍵詞"
style="width: 200px;"
clearable
@keyup.enter.native="handleFilter"
/>
<el-date-picker
v-model="dateRange"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結束日期"
:picker-options="pickerOptions"
value-format="timestamp"
style="width:400px;"
></el-date-picker>
<!-- 按鈕 -->
<el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查詢</el-button>
<el-button
style="margin-left: 5px;"
type="primary"
icon="el-icon-circle-plus-outline"
@click="handleCreate"
>增加</el-button>
</div>
<!-- 主表數據展示 -->
<div class="table-main">
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%;"
:key="tableKey"
>
<!-- 表格列定義 -->
<el-table-column label="名稱" align="center">
<template slot-scope="{row}">
<span>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="更新時間" align="center">
<template slot-scope="{row}">
<span>{{ row.updateTime | parseTime}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding " width="460px">
<template slot-scope="{row}">
<el-button type="primary" size="mini" @click="handleGet(row)">詳情</el-button>
<el-button type="primary" size="mini" @click="handleUpdate(row)">編輯</el-button>
<el-button
v-if="row.status!='deleted'"
size="mini"
type="danger"
@click="handleDelete(row)"
>刪除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格分頁 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.rows"
@pagination="getList"
/>
</div>
<!-- “新增”/“編輯”數據交互界面 -->
<div class="DialogForm-add">
<el-dialog
:title="textMap[dialogStatus]"
:visible.sync="dialogFormVisible_add"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="900px"
ref="dataDialog_add"
>
<el-form
ref="dataForm_add"
:model="temp"
label-position="right"
label-width="100px"
style="width: 680px; margin-left:30px;"
:rules="rules"
>
<el-form-item label="名稱" prop="name">
<el-input
type="text"
placeholder="請輸入名稱"
v-model="temp.name"
maxlength="25"
style="width:420px"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="其他" >
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible_add = false">取消</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">確定</el-button>
</div>
</el-dialog>
</div>
<!-- “詳情”數據交互界面 -->
<div class="DialogForm-detail">
<el-dialog
:title="textMap[dialogStatus]"
:visible.sync="dialogFormVisible_detail"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="920px"
>
<el-form
ref="dataForm_detail"
:model="displayList"
label-position="right"
label-width="100px"
style="width: 830px; margin-left:30px;"
:rules="rules"
>
<el-form-item label="名稱" prop="name">
<el-input
type="text"
v-model="displayList.name"
maxlength="20"
style="width:350px"
show-word-limit
:disabled="true"
></el-input>
</el-form-item>
<el-form-item label="其他" >
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible_detail = false">取消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {fetchList, createRecord, updateRecord} from "@/api/具體js文件名";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";
import { parseTime, parseTime2 } from "@/utils/index.js";
export default {
name: "PopulationScreening"（該vue文件名）,
components: { Pagination },
directives: { waves },
filters: {
parseTime, //時間格式：yy-mm-dd-hh-mm-ss
parseTime2 //時間格式：yy-mm-dd
},
data(){
return {
//日期選擇
pickerOptions: {
shortcuts: [
{
text: "最近一週",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一個月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三個月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
},
rules: {
name: [{ required: true, message: "請填名稱", trigger: "blur" }],
},
list: [],
displayList: [],
rowKey: "rowKey",
total: 0,
tableKey: 0,
listLoading: true,
//傳給後臺的數據對象（一般用於“新增”操作）
temp: {
name: "",
},
listQuery: {
keyword: "",
beginDate: "",
endDate: "",
rows: 10,
page: 1
},
textMap: {
update: "編輯",
create: "新增",
get: "詳情",
},
dialogStatus: "",
dateRange: "",
dialogFormVisible_add: false,
dialogFormVisible_detail: false,
};
},
mounted() {},
//進入頁面時自動加載
created() {
this.getList();
},
//JS函數
methods: {
//=========== 操作函數 ==========
//點擊查詢按鈕
handleFilter() {
//每次查詢後分頁page參數都重新初始化爲1
this.listQuery.page = 1;
//設置查詢時間
if (this.dateRange != null && this.dateRange != "") {
this.listQuery.beginDate = this.dateRange[0].toString();
this.listQuery.endDate = this.dateRange[1].toString();
} else {
this.listQuery.beginDate = "";
this.listQuery.endDate = "";
}
this.getList();
this.$destroy;
},
//點擊增加按鈕
handleCreate() {
this.dialogFormVisible_add = true;
this.dialogStatus = "create";
this.resetTemp();
setTimeout(() => {
this.$refs["dataForm_add"].clearValidate();
}, 0);
},
//點擊詳情按鈕
handleGet(row) {
this.dialogFormVisible_detail = true;
this.dialogStatus = "get";
this.displayList = row;
},
//點擊編輯按鈕
handleUpdate(row) {
this.dialogFormVisible_add = true;
setTimeout(() => {
this.$refs["dataForm_add"].clearValidate();
}, 0);
this.dialogStatus = "update";
//把row中的數據賦值到this.temp中
this.TransformData(row);
},
//點擊刪除按鈕
handleDelete(row) {
this.$confirm("您確認要刪除嗎？", "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
})
.then(async () => {
await deleteRecord(row);
this.$message({
type: "success",
message: "刪除成功"
});
this.getList();
})
.catch(err => {
console.error(err);
});
},
//=========== 主函數 ===========
//獲取主頁table的數據
getList() {
setTimeout(() => {
fetchList(this.listQuery).then(response => {
this.list = response.value.rows;
this.total = response.value.records;
this.listLoading = false;
}),
0;});
},
//創建篩選策略
createData() {
this.$refs["dataForm_add"].validate(valid => {
if (valid) {
createRecord(this.temp).then(() => {
this.$notify({
title: "成功",
message: "創建成功",
type: "success",
duration: 2000
});
this.handleFilter();
this.dialogFormVisible_add = false;
});
}
});
},
//修改篩選策略
updateData() {
this.$refs["dataForm_add"].validate(valid => {
if (valid) {
updateRecord(this.temp).then(() => {
this.$notify({
title: "成功",
message: "修改成功",
type: "success",
duration: 2000
});
this.handleFilter();
this.dialogFormVisible_add = false;
});
}
});
},
//初始化Temp
resetTemp() {
this.temp = {
name: "",
};
},
//把row中的數據賦值到this.temp中
TransformData(row) {
this.temp.id = row.id;
this.temp.name = row.name;
}
}
}
</script>
