用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>

效果展示