vue-cli+element UI 纯前端简单的form增删改查

用vue-cli + element UI 写的一个简单的表单增删改查页面

我是一个菜鸟前端 , 写这个之前也看过很多大佬的博客 , 无奈没有太详细的注释 , 根本看不懂 , 所以把自己写的代码恨不得每一行都加上注释 , 让大家见笑了.
顺便说一句 , element里面的日期选择器我不会用 , 每次选择之后的,显示在表单上面的都是 undefined , 求助大佬的时候 , 大佬说把 input 改成 日期就可以了 , 我试过后果然可行, input 真是一个神奇的控件啊!

<template>
  <div class="Home-container">
    <!-- 头部卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="primaryform" ref="primaryform" class="demo-form-inline">
          <el-form-item label="产业" prop="industry">
            <el-select v-model="primaryform.industry" placeholder="请选择">
              <el-option value="小米"></el-option>
              <el-option value="华为"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地域" prop="district">
            <el-select v-model="primaryform.district" placeholder="请选择">
              <el-option value="深圳"></el-option>
              <el-option value="广州"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售产品" prop="SalesCompany">
            <el-select v-model="primaryform.SalesCompany" placeholder="请选择">
              <el-option value="手机"></el-option>
              <el-option value="手环"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期选择" prop="date">
            <el-input type="date" v-model="primaryform.date" />
          </el-form-item>
          <el-form-item label="产品" prop="product">
            <el-input v-model="primaryform.product"></el-input>
          </el-form-item>
          <!-- 查询 -->
          <el-button type="primary" size="medium" icon="el-icon-search" @click="inquire">查询</el-button>
          <!-- 新增 -->
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-plus"
            @click="add=true;dialog = true"
          >新增</el-button>
          <!-- 清除 -->
          <el-button type="primary" size="medium" icon="el-icon-refresh" @click="reset">重置</el-button>
          <!-- 弹出框 -->
          <el-dialog
            :close-on-click-modal="false"
            :append-to-body="true"
            :title="add?'产品新增':'产品信息修改'"
            :visible.sync="dialog"
            style="text-align:left !important"
            :before-close="handleClose"
          >
            <el-form :model="formInline" label-width="80px">
              <el-form-item label="产业" prop="industry">
                <el-select v-model="formInline.industry" placeholder="请选择">
                  <el-option value="小米"></el-option>
                  <el-option value="华为"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域" prop="district">
                <el-select v-model="formInline.district" placeholder="请选择">
                  <el-option value="深圳"></el-option>
                  <el-option value="广州"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="销售产品" prop="SalesCompany">
                <el-select v-model="formInline.SalesCompany" placeholder="请选择">
                  <el-option value="手机"></el-option>
                  <el-option value="手环"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日期选择" prop="date">
                <el-input type="date" v-model="formInline.date" />
              </el-form-item>
              <el-form-item label="产品" prop="product">
                <el-input v-model="formInline.product"></el-input>
              </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
              <el-button type="primary" @click="dialog = false">取 消</el-button>
              <el-button type="success" icon="el-icon-download" @click="saveInfo(formInline)">保存</el-button>
            </div>
          </el-dialog>
        </el-form>
      </div>
    </el-card>
    <!-- 身体卡片 -->
    <el-card class="box-card">
      <span>订单列表</span>
      <!-- 表格 -->
      <!-- :data里面的方法 能拿到你当前要显示的数据和总数据条数 -->
      <el-table  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="industry" label="产业"></el-table-column>
        <el-table-column prop="district" label="区域"></el-table-column>
        <el-table-column prop="SalesCompany" label="销售产品"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="product" label="产品"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              @click="edit(scope.$index,scope.row)"
            >修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
         background
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>


<script>
export default {
  name: "index",
  data() {
    return {
      // 主表数据
      primaryform: {
        // 产业
        industry: "",
        // 区域
        district: "",
        // 销售产品
        SalesCompany: "",
        // 日期
        date: "",
        // 产品
        product: "",
       
      },
      // 表单数据
      formInline: {},
      // table的数据
      tableData: [],
      // 新增弹出框
      add: true,
      // 查询列表
      table: false,
      // 关掉对话框
      dialog: false,
      // 查询的订单
      order: [], // 查询选中列表
      currentPage: 1, //当前页码
      total: 10, //总条数
      pageSize: 1 // 每页的数据条数
    };
  },
  // 模板渲染成html前调用
  created() {
    this.getdata();
  },
  // 在模板渲染成html后调用
  methods: {
    // 新增弹出框
    handleClose(done) {
      done();
      this.formInline = {};
      // 查询按钮绑定的控件
      // 产业
      this.primaryform.industry = "";
      // 区域
      this.primaryform.district = "";
      // 销售产品
      this.primaryform.SalesCompany = "";
      // 日期
      this.primaryform.date = "";
      // 产品
      this.primaryform.product = "";
    },
    // 获取数据
    getdata() {
      // 我们定义的获取数据的方法
      this.tableData = JSON.parse(localStorage.getItem("form") || "[]");
    },
    // 新增弹出框
    // 保存数据
    saveInfo(formInline) {
      if (this.add == true) {
        if (
          this.formInline.industry &&
          this.formInline.district &&
          this.formInline.SalesCompany &&
          this.formInline.date &&
          this.formInline.product
        ) {
          this.tableData.push(formInline);
          localStorage.setItem("form", JSON.stringify(this.tableData));
          // 将value存储到key字段
          // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
          // 关掉对话框
          this.dialog = false;
          // 存储到表单中
          this.formInline = {};
        } else {
          alert("表单不能为空");
        }
      } else {
        // 接收修改的数据
        this.tableData[this._index] = this.formInline;
        localStorage.setItem("form", JSON.stringify(this.tableData));
        this.dialog = false;
        this.formInline = {};
        this.getdata();
      }
    },

    // 删除
    del(index) {
      if (confirm("确定删除订单吗?")) {
        this.tableData.splice(index, 1);
        localStorage.setItem("form", JSON.stringify(this.tableData));
      }
    },
    // 修改
    edit(id, row) {
      this.dialog = true;
      this.add = false;
      this._index = id;
      // Object.assign()拷贝的是属性值
      this.formInline = Object.assign({}, row);
    },
    // 查询数据
    inquire() {
      let arr = JSON.parse(localStorage.getItem("form"));
      // filter用于对数组进行过滤。
      this.tableData = arr.filter(
        // 查询范围 v.绑定哪一个控件查询 this.绑定查询数据
        v =>
          v.industry == this.primaryform.industry ||
          v.district == this.primaryform.district ||
          v.SalesCompany == this.primaryform.SalesCompany ||
          v.date == this.primaryform.date ||
          v.product == this.primaryform.product
      );
      if (this.tableData.length > 0) {
        this.table = true;
      } else {
        alert("订单不存在");
      }
    },
    // 重置主表数据
    reset: function() {
      this.$refs.primaryform.resetFields();
    },
    //  每页多少条
     handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
      },
      // 当前页
       handleCurrentChange(val) {
        this.currentPage = val;
      }
  }
};
</script>