前言
同理的话,我们还是用vue+element有不懂的话,可以看看前面两篇文章,上面有vue以及element的介绍,这里的话我们还是element的表格插件,同时后台管理界面无非就是一个crud,增删改查所以我这里就用一个界面进行举例说明
正文
首先的话我们还是介绍一下我们需要重点用到的插件
他的属性的话有这些
当然大家也可以去官网看一下详细介绍
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element.eleme.cn/这样等的话我们就解决了,主要的数据展示的部分,同时我们也可以对数据进行修改以及调整,
这里我们已轮播图作为举例说明,我们先来确定主要功能
首先,可以看到我们的分为两个板块,一个筛选面版以及主体部分内容,筛选面版的话,大家可以自行调整,我这边没啥好解释的直接放上我的已经封装好的代码吧
<template>
<div class="plant">
<b style="font-size: 26px">筛选:</b>
<div>
<el-form label-position="top">
<slot name="filters"/>
</el-form>
</div>
<div style="display:flex;position: absolute;bottom: 20px;right: 50px">
<slot name="button"></slot>
</div>
</div>
</template>
<script>
export default {
name: "filterPlant",
}
</script>
<style scoped>
.plant{
width: 80%;
box-shadow: 0 0 6px rgba(51, 51, 51, 0.3);
border-radius: 1em;
margin: 10px auto;
padding:30px 50px;
height: 180px;
position: relative;
}
</style>
大家需要添加什么内容直接用插槽插入就行
后面的话就是教大家如何使用el-table
没啥好介绍的直接看代码吧
<template>
<div>
<!-- 过滤面板-->
<filter-plant>
<el-form-item slot="filters">
<el-col :span="8">
<el-form-item label="主题">
<el-input v-model="filterParam.goodTitle" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-button type="primary" slot="button" @click="list()">搜索</el-button>
<el-button type="success" slot="button" @click="editVisible=true;addBefore()">新增</el-button>
<el-button type="info" slot="button" @click="reset()">重置</el-button>
</filter-plant>
<!-- 表单-->
<el-table
:data="tableData"
stripe
style="width:90%;margin:50px auto;border-radius:1em;box-shadow: 0 0 3px rgba(128,128,128,0.5)"
>
<el-table-column
prop="title"
label="主题"
width="auto">
</el-table-column>
<el-table-column
prop="goodTitle"
label="商品标题"
width="auto"
></el-table-column>
<el-table-column
prop="imgUrl"
label="轮播图片"
width="170px">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" width="130px" style="border-radius:10%;max-height: 100px" alt="图片"/>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="注册时间"
width="auto">
<template slot-scope="scope">
{{ scope.row.createTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间"
width="auto">
<template slot-scope="scope">
{{ scope.row.updateTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="id"
label="操作"
width="140">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" icon="el-icon-edit"
@click="editVisible=true;updBefore(scope.row.swiperId) " ></el-button>
<!-- //编辑按钮 -->
<el-button type="danger" icon="el-icon-delete" @click="remove(scope.row.swiperId)" ></el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- 新增-->
<el-dialog
:title="editTitle"
:visible.sync="editVisible"
width="40%"
center>
<el-form>
<el-form-item label="主题" required>
<el-input v-model="editParam.title"></el-input>
</el-form-item>
<el-form-item label="商品信息" required>
<el-select
v-model="editParam.goodId"
filterable
remote
reserve-keyword
placeholder="请输入商品标题进行筛选"
:remote-method="remoteMethod">
<el-option
v-for="item in options"
:key="item.index"
:label="item.goodTitle+' (￥'+item.price+')'"
:value="item.goodId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="轮播图片">
<div> </div>
<div style="display: flex">
<div style="margin-right:50px" v-if="editParam.imgUrl">
<img :src="editParam.imgUrl" alt="图片" style="height:100px; border-radius: 10%;">
</div>
<el-upload
v-if="!isUpload"
class="upload-demo"
action="#"
:on-change="getFile"
multiple
:limit="1"
:auto-upload="false"
style="position:relative;top:10px;text-align: center;">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="info" @click="editVisible=false">取 消</el-button>
<el-button type="success" @click="editButton()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import FilterPlant from "../../../components/common/filterPlant/filterPlant";
import {
net_getSwiper,
net_getSwiperBack,
net_insertSwiper,
net_modifySwiper,
net_removeSwiper
} from "../../../net/back/swiper";
import {net_getGood} from "../../../net/back/goods";
import {uploadFile} from "../../../net/back/file";
export default {
name: "back_swiper",
components: {FilterPlant},
data() {
return {
filterParam: {
goodTitle: '',
},
tableData: [],
editTitle: '',
editVisible: false,
editParam: {
goodId: '',
title: '',
imgUrl: '',
},
isAdd: true,
isUpload: false,
options: '',//文章选择
}
},
async created() {
await this.list();
this.options = (await net_getGood({})).data;
},
methods: {
//过滤对象空值
filterRequest(values) {
let newValues = values;
Object.keys(newValues).map((item) => {
if (!newValues[item]) {
delete newValues[item];
}
return true;
});
return newValues;
},
async list() {
let res = await net_getSwiperBack(this.filterRequest(this.filterParam));
this.tableData = res.data;
this.total = res.data.total;
},
async add() {
this.setParam(await net_insertSwiper(this.filterRequest(this.editParam)));
},
async remove(id) {
this.setParam(await net_removeSwiper(id));
},
async update() {
this.setParam(await net_modifySwiper(this.filterRequest(this.editParam)));
},
addBefore() {
this.isAdd = true;
this.editParam = {
swiperId: '',
title: '',
imgUrl: '',
}
this.editTitle = this.$route.name + "(新增)";
},
async updBefore(id) {
this.isAdd = false;
this.editParam = (await net_getSwiper({swiper_id: id})).data[0];
this.editTitle = this.$route.name + "(修改)";
},
reset() {
this.filterParam = {
title: '',
}
this.list();
},
editButton() {
if (this.verify()) {
if (this.isAdd) {
this.add();
} else {
this.update();
}
this.editVisible = false;
this.isUpload=false;
}
},
async getFile(file) {
let data = new FormData();
data.append("file", file.raw);
data.append("category", "avatar");
data.append("md5", "1");
let res = (await uploadFile(data)).data;
if (res.code === "200") {
this.editParam.imgUrl = res.data.path;
this.isUpload = true;
}
this.$store.commit("tip", res);
},
setParam(res) {
if (res.code === "200") {
this.list();
}
this.$store.commit("tip", res);
},
verify() {
let res = {
code: "500",
message: ""
};
if (this.editParam.title === "") {
res.message = "轮播图主题不能为空";
} else if (this.editParam.goodId === "" || this.editParam.goodId === null) {
res.message = "为选择对应商品";
} else if (this.editParam.imgUrl === "") {
res.message = "轮播图片未上传";
}
if (res.message !== "") {
this.$store.commit("tip", res);
return false;
} else {
return true;
}
},
async remoteMethod(query) {
this.options = (await net_getGood({"title": query})).data.records;
}
}
}
</script>
<style scoped>
</style>
新增/修改
我们这个新增和修改,用到了element的dialog
通过往表单里面插入表单,我们就可以把新增/修改,同时加一个事件监听器来解决,新增和修改问题
新增
修改
所有代码如下
<template>
<div>
<!-- 过滤面板-->
<filter-plant>
<el-form-item slot="filters">
<el-col :span="8">
<el-form-item label="主题">
<el-input v-model="filterParam.goodTitle" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-button type="primary" slot="button" @click="list()">搜索</el-button>
<el-button type="success" slot="button" @click="editVisible=true;addBefore()">新增</el-button>
<el-button type="info" slot="button" @click="reset()">重置</el-button>
</filter-plant>
<!-- 表单-->
<el-table
:data="tableData"
stripe
style="width:90%;margin:50px auto;border-radius:1em;box-shadow: 0 0 3px rgba(128,128,128,0.5)"
>
<el-table-column
prop="title"
label="主题"
width="auto">
</el-table-column>
<el-table-column
prop="goodTitle"
label="商品标题"
width="auto"
></el-table-column>
<el-table-column
prop="imgUrl"
label="轮播图片"
width="170px">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" width="130px" style="border-radius:10%;max-height: 100px" alt="图片"/>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="注册时间"
width="auto">
<template slot-scope="scope">
{{ scope.row.createTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间"
width="auto">
<template slot-scope="scope">
{{ scope.row.updateTime.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column
prop="id"
label="操作"
width="140">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" icon="el-icon-edit"
@click="editVisible=true;updBefore(scope.row.swiperId) " ></el-button>
<!-- //编辑按钮 -->
<el-button type="danger" icon="el-icon-delete" @click="remove(scope.row.swiperId)" ></el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- 新增-->
<el-dialog
:title="editTitle"
:visible.sync="editVisible"
width="40%"
center>
<el-form>
<el-form-item label="主题" required>
<el-input v-model="editParam.title"></el-input>
</el-form-item>
<el-form-item label="商品信息" required>
<el-select
v-model="editParam.goodId"
filterable
remote
reserve-keyword
placeholder="请输入商品标题进行筛选"
:remote-method="remoteMethod">
<el-option
v-for="item in options"
:key="item.index"
:label="item.goodTitle+' (￥'+item.price+')'"
:value="item.goodId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="轮播图片">
<div> </div>
<div style="display: flex">
<div style="margin-right:50px" v-if="editParam.imgUrl">
<img :src="editParam.imgUrl" alt="图片" style="height:100px; border-radius: 10%;">
</div>
<el-upload
v-if="!isUpload"
class="upload-demo"
action="#"
:on-change="getFile"
multiple
:limit="1"
:auto-upload="false"
style="position:relative;top:10px;text-align: center;">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="info" @click="editVisible=false">取 消</el-button>
<el-button type="success" @click="editButton()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import FilterPlant from "../../../components/common/filterPlant/filterPlant";
import {
net_getSwiper,
net_getSwiperBack,
net_insertSwiper,
net_modifySwiper,
net_removeSwiper
} from "../../../net/back/swiper";
import {net_getGood} from "../../../net/back/goods";
import {uploadFile} from "../../../net/back/file";
export default {
name: "back_swiper",
components: {FilterPlant},
data() {
return {
filterParam: {
goodTitle: '',
},
tableData: [],
editTitle: '',
editVisible: false,
editParam: {
goodId: '',
title: '',
imgUrl: '',
},
isAdd: true,
isUpload: false,
options: '',//文章选择
}
},
async created() {
await this.list();
this.options = (await net_getGood({})).data;
},
methods: {
//过滤对象空值
filterRequest(values) {
let newValues = values;
Object.keys(newValues).map((item) => {
if (!newValues[item]) {
delete newValues[item];
}
return true;
});
return newValues;
},
async list() {
let res = await net_getSwiperBack(this.filterRequest(this.filterParam));
this.tableData = res.data;
this.total = res.data.total;
},
async add() {
this.setParam(await net_insertSwiper(this.filterRequest(this.editParam)));
},
async remove(id) {
this.setParam(await net_removeSwiper(id));
},
async update() {
this.setParam(await net_modifySwiper(this.filterRequest(this.editParam)));
},
addBefore() {
this.isAdd = true;
this.editParam = {
swiperId: '',
title: '',
imgUrl: '',
}
this.editTitle = this.$route.name + "(新增)";
},
async updBefore(id) {
this.isAdd = false;
this.editParam = (await net_getSwiper({swiper_id: id})).data[0];
this.editTitle = this.$route.name + "(修改)";
},
reset() {
this.filterParam = {
title: '',
}
this.list();
},
editButton() {
if (this.verify()) {
if (this.isAdd) {
this.add();
} else {
this.update();
}
this.editVisible = false;
this.isUpload=false;
}
},
async getFile(file) {
let data = new FormData();
data.append("file", file.raw);
data.append("category", "avatar");
data.append("md5", "1");
let res = (await uploadFile(data)).data;
if (res.code === "200") {
this.editParam.imgUrl = res.data.path;
this.isUpload = true;
}
this.$store.commit("tip", res);
},
setParam(res) {
if (res.code === "200") {
this.list();
}
this.$store.commit("tip", res);
},
verify() {
let res = {
code: "500",
message: ""
};
if (this.editParam.title === "") {
res.message = "轮播图主题不能为空";
} else if (this.editParam.goodId === "" || this.editParam.goodId === null) {
res.message = "为选择对应商品";
} else if (this.editParam.imgUrl === "") {
res.message = "轮播图片未上传";
}
if (res.message !== "") {
this.$store.commit("tip", res);
return false;
} else {
return true;
}
},
async remoteMethod(query) {
this.options = (await net_getGood({"title": query})).data.records;
}
}
}
</script>
<style scoped>
</style>
同理,其他模块也是一样,最后加上element的导航栏,我一个后台管理界面就解决了
登录注册的话还是和前端一样
主题所有文章已经更新欢迎大家,留言评论
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
