Element 后台管理系统实用表格布局
Posted aiguangyuan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element 后台管理系统实用表格布局相关的知识,希望对你有一定的参考价值。
此篇本章提供 Element 在后台管理系统中开发的一点归纳总结,欢迎大家复制粘贴及吐槽!
<template>
<div>
<div class="app-container">
<!-- 表格搜索 -->
<div class="filter-container">
<div class="filter-left">
<el-button
class="filter-item"
style="margin-bottom:0px;"
type="primary"
@click="addTableData">
新增
</el-button>
</div>
<div class="filter-right">
<el-button
class="filter-item"
style="margin-bottom:0px;"
type="primary"
@click="tableSearch">
搜索
</el-button>
<el-button
class="filter-item"
style="margin-bottom:0px;"
@click="resetTable">
重置
</el-button>
</div>
</div>
<!-- 表格主体 -->
<div class="table-container">
<el-table
border
:data="tableData"
style="width:100%;"
:height="tableHeight">
<!-- 属性与字段根据实际情况进行修改 -->
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column prop=" " label="字段"></el-table-column>
<el-table-column label="操作">
<template slot-scope="obj">
<el-button type="primary" @click="editTableData(obj.row.id)">
编辑
</el-button>
<el-button type="default" @click="deleteTableData(obj.row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 表格分页 -->
<el-pagination
background
class="pagination"
:total="tablePaginate.total"
:layout="tablePaginate.layout"
:page-size="tablePaginate.limit"
:page-sizes="tablePaginate.sizes"
:current-page="tablePaginate.current"
@size-change="tablePageSizeChange"
@current-change="tablePageNumChange"
/>
</div>
</div>
</template>
<script>
import { Loading } from 'element-ui';
import {formatTime,urlEncode} from "@/utils/public";
export default {
name: "",
data() {
return {
// 表格查询接口
tableUrl:"",
// 表格查询参数
tableParam:{
page:1,
pageSize:20,
// 其它条件
},
// 表格加载动画
tableLoading:null,
// 表格计算高度
tableHeight:0,
// 表格动态数据
tableData:[],
// 表格分页配置
tablePaginate: {
limit:20,
total:0,
current:0,
sizes: [10, 20, 50, 100],
layout: 'total, sizes, prev, pager, next, jumper',
},
};
},
created(){
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 表格高度 = 屏幕高度 - 表格以外的其它元素高度总和
this.tableHeight = windowHeight - 272;
},
mounted(){
this.getTableData();
},
methods: {
// 表格查询
getTableData(){
if(this.tableLoading==null){
let params = this.tableParam;
this.tableLoading = Loading.service({
text: "加载中",
target: ".table-container",
});
let url = this.tableUrl + "?" + urlEncode(params).substring(1);
this.$http.get(url).then((result) => {
if (result.code == 10000) {
// 表格数据
this.tableData = result.data.data;
// 分页信息
this.tablePaginate.total = result.data.total;
this.tablePaginate.current = result.data.current;
this.$nextTick(() => {
this.tableLoading.close();
this.tableLoading = null;
});
}
});
}
},
// 表格搜索
tableSearch(){
this.tableParam.page = 1;
this.getTableData();
},
// 重置表格
resetTable(){
// 重置表格查询参数
// 重新调用表格查询
},
// 新增表格数据
addTableData(){
// 打开新增模态框,可与编辑共用
},
// 确认新增表格数据
confirmAddTableData(){
// 添加模态框点击确认
},
// 关闭添加与编辑模态框
closeAddEditModal(){
},
// 编辑表格数据
editTableData(id){
// 打开编辑模态框,可与新增共用
},
// 确认编辑表格数据
confirmEditTableData(){
// 编辑模态框点击确认
},
// 删除表格数据
deleteTableData(id){
this.$confirm('确定要删除这条数据吗 ?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发起请求删除数据
})
},
// 改变页大小
tablePageSizeChange(size){
this.tableParam.pageSize = size;
this.getTableData();
},
// 改变当前页
tablePageNumChange(num){
this.tableParam.page = num;
this.getTableData();
}
},
};
</script>
<style lang="scss" scoped>
.app-container {
// 屏幕高度 - 面包屑高度
height: calc(100vh - 132px);
overflow: hidden;
.filter-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:flex-start;
padding: 0px;
height: 50px;
.filter-left{
display: flex;
flex-direction: row;
align-items:center;
justify-content: flex-start;
}
.filter-right{
display: flex;
flex-direction: row;
align-items:center;
justify-content: flex-end;
}
}
.table-container {
// 屏幕高度 - 表格以外的其它元素高度总和
height: calc(100vh - 272px);
overflow: hidden;
}
.pagination{
height:50px;
line-height:50px;
padding:11px 10px;
border:1px solid #eaedf1;
}
}
</style>
以下是上面代码中引入的public文件代码:
// public.js
// 格式化时间
export function formatTime(now){
let year = now.getFullYear();
let month = now.getMonth()+1;
let date = now.getDate();
month = month<10?'0'+month:month;
date = date<10?'0'+date:date;
let time = year +'-'+month+'-'+date;
return time;
};
// 参数格式化
export function urlEncode(param, key, encode) {
if (param == null) {
return "";
}
var paramStr = "";
var t = typeof param;
if (t == "string" || t == "number" || t == "boolean") {
if(param.toString()!=""){
paramStr +="&" +key +"=" +(encode == null || encode? encodeURIComponent(param): param);
};
} else {
for (var i in param) {
var k = key == null? i: key +(param instanceof Array? "[" + i + "]": "." + i);
paramStr += urlEncode(param[i], k, encode);
}
};
return paramStr;
};
以上是关于Element 后台管理系统实用表格布局的主要内容,如果未能解决你的问题,请参考以下文章
前端Vue+Element UI案例:通用后台管理系统-Home组件:卡片表格
Vue + Element-ui实现后台管理系统---封装一个Form表单组件和Table表格组件
Vue + Element-ui实现后台管理系统---封装一个Form表单组件和Table表格组件