用element-ui进行简单的商品管理

安装element-ui

项目的控制台输入npm i element-ui -S

main.js

import ElementUI from 'element-ui';//引入element-ui模块
import 'element-ui/lib/theme-chalk/index.css';//引入element-ui的css样式
Vue.use(ElementUI);//使用ElementUI

商品管理组件

<template><div><h3>商品管理</h3><div class="heard_search_container"><el-form :inline="true" class="demo-form-inline"><el-form-item label="价格:"><el-input v-model="input" placeholder="请输入内容"></el-input></el-form-item><el-form-item label="名称:"><el-input v-model="val" placeholder="请输入内容"></el-input></el-form-item><el-form-item><el-button type="primary" @click="clickAdd">添加</el-button></el-form-item></el-form><!-- </div> --><div class="heard_search_bottom"><span>商品总数：{{bookTotal}}</span></div><template><el-table :data="bookList" border style="width: 100%"><el-table-column prop="number" label="价格" width="50" style="text-algin:center"></el-table-column><el-table-column prop="user" label="名称" width="160"></el-table-column><el-table-column prop="time" label="添加时间" width="200"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="clickEdit(scope.$index)" type="success">编辑</el-button><el-button size="mini" type="danger" @click="clickDel(scope.$index)">删除</el-button></template></el-table-column></el-table></template></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {input: "", //输入的内容(序号)val: "", //  输入的名称flag: false, //编辑的状态bookList:JSON.parse(window.localStorage.getItem("bookList"))||[],//存放图书管理数据,获取存储在//   bookList: [],//存放图书管理数据};},
//   mounted() {//挂载后// 读取localStorage中的数据
//     let tableDatas = localStorage.bookList;
//     if (tableDatas) {
//       this.bookList = JSON.parse(tableDatas);
//     }
//   },methods: {clickAdd() {//添加// 判断是否点击了编辑按钮if (this.flag) {this.bookList.forEach(item=>{//遍历数组if(item.number===this.input){//如果遍历数组中的序列号和输入的序列号一样item.user=this.val;//那么将输入的图书名称，赋值给遍历对应的图书名称}});this.input="";//清空输入内容this.val="";//清空输入内容this.save();//保存到本地this.flag=false;} else {// 判断输入的内容不能为空if (this.input.length !== 0 && this.val !== 0) {var rel = true;// 判断去重this.bookList.forEach((item) => {//遍历数组//如果遍历数组中的序列号和输入的序列号一样，或者遍历数组中的图书名称和输入的图书名称一致if (item.number == this.input || item.user == this.val) {this.$message("图书名称已存在");//这说明图书已存在rel = false;return false;}});if (rel) {//添加this.bookList.push({number: this.input,user: this.val,time: new Date().toLocaleString(),});}this.input = "";//添加后清空this.val = "";//添加后清空this.save();//保存到本地} else {//   输入为空的提示this.$alert("输入的编号或图书名称不能为空", "提示", {confirmButtonText: "确定",callback: () => {},});}}},clickEdit(index) {//点击修改this.flag = true;var updateData = this.bookList[index];this.input = updateData.number;this.val = updateData.user;},clickDel(index) {//删除this.bookList.splice(index, 1);this.save();},save() {//保存到本地（封装的save方法）// localStorage.bookList=JSON.stringify(this.bookList);window.localStorage.setItem("bookList", JSON.stringify(this.bookList));},},computed: {//计算属性bookTotal(){//图书总数return this.bookList.length;}},
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-table th > .cell {text-align: center;
}
.el-table .cell {text-align: center;
}
</style><style lang="scss" scoped>h3 {text-align: center;}
.heard_search_container {width: 50%;margin: 0 auto;background: skyblue;
.heard_search_bottom {width: 100%;height: 42px;display: inline-flex;justify-content: center;align-items: center;border-bottom: 1px solid lightgreen;border-top: 1px solid lightgreen;
}
}
.el-form-item {margin-bottom: 8px !important;margin-top: 8px !important;
}</style>