关于html5:前端培训中级阶段43-vue-2x-实战-CURD

前端最根底的就是 HTML+CSS+Javascript。把握了这三门技术就算入门，但也仅仅是入门，当初前端开发的定义曾经远远不止这些。前端小课堂（HTML/CSS/JS），本着晋升技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

后面咱们根本学会了 Vue 的根本应用，那么明天咱们来尝试实现一个库存管理系统，因为没有学服务端（放前面 express 外面做接口），咱们临时就不思考服务端的实现了，间接存本地。

demo地址：https://www.lilnong.top/static/html/vue-erp-test.html。
demo地址，批改为 vue@2.6.11，反对新的插槽语法：https://www.lilnong.top/static/html/vue-erp-test-vue@2.6.11.html

需要

部门治理
人员治理，人员须要和部门关联。
库存治理，须要关联人员
1. 能够补货
2. 能够被领用，须要有领用人和数量
须要有操作记录

需要大略就是这样，上面说一下咱们的实现计划：

因为没有服务端，所以数据寄存在 localStroage 中。
基本上就是 table + dialog
- table 负责展现数据
- dialog 负责新增批改数据
初始化从 localStroage 读取数据，每次操作完保留 localStroage。

实现

table 列表

代码如下，咱们来看一下外面都用到了那些货色

v-if 用来判断以后应该显示那个标签的内容
- 来个面试题 v-if 和 v-show 区别是什么？前端培训-中级阶段（35）- Vue 语法之 Vue 自带的指令
v-bind，缩写为 :
- size="mini" 用来传入了一个字符串，其实等价于 :size="'mini'"
v-on，缩写为 @
- @click="insertGroup" 用来实现单击时触发函数。
插槽，用于父组件给子组件传递 DOM
- <el-button>新增部门</el-button>，el-button 是一个组件，外部接管到了一个 <slot name="default"> 的内容。
- <template slot-scope="scope"> 这里是一个作用域插槽，DOM 应用父级的，然而作用域应用子级的。当然 slot-scope 被废除了，应该用 2.6.0 减少的 v-slot

<div v-if="navIdx == 1">    <div class="header">部门治理</div>    <div class="search-box">        <el-button             size="mini"             type="primary"             @click="insertGroup">新增部门</el-button>    </div>    <el-table    :data="list1"    style="width: 100%;padding-left: 10px;">        <el-table-column            prop="id"            label="编号"            width="180">        </el-table-column>        <el-table-column            prop="name"            label="名称"            width="auto">        </el-table-column>        <el-table-column            label="操作"            width="200">            <template slot-scope="scope">                <el-button                     size="mini"                     type="warning"                    @click="updateGroup(scope.row)">批改部门信息</el-button>            </template>        </el-table-column>    </el-table></div>

dialog

代码如下，咱们来看一下外面都用到了那些货色

首先咱们把一个 dialog 的状态，全副集成到一个 memberInfo 变量中。
这样其实是不便咱们开发的，如果是多个 dialog 的场景，咱们就能够很不便的分辨出作用域。
.sync（vue 2.3.0+ 新增）能够了解是对组件间数据双向绑定的一个扩大。之前只能用 v-model 来做（:value 和 @input）。
- :visible.sync="memberInfo.dialogVisible" 子组件能够通过 this.$emit('update:visible', newVisible) 来批改父组件的 memberInfo.dialogVisible 的值。
插槽
- 具名插槽 <span slot="footer" class="dialog-footer">，当然 slot 被废除了，应该用 2.6.0 减少的 v-slot

<el-dialog    :title="memberInfo.id?'批改':'新增'"    :visible.sync="memberInfo.dialogVisible"    width="30%">    <div>        <div>            <el-input v-model="memberInfo.name" placeholder="人员名称"></el-input>        </div>        <div>            <el-select v-model="memberInfo.groupid" placeholder="请抉择所属部门">                <el-option                    v-for="item in list1"                    :key="item.id"                    :label="item.name"                    :value="item.id">                </el-option>            </el-select>        </div>    </div>    <span slot="footer" class="dialog-footer">        <el-button size="mini" @click="memberInfoHandler(0)">取 消</el-button>        <el-button size="mini" type="primary" @click="memberInfoHandler(1)">确 定</el-button>    </span></el-dialog>

初始化数据&操作之后保留数据

初始化数据

created 时从 localStorage 读取数据。因为 Storage 只能保留字符串，所以还须要 JSON.parse 一下。

created(){    this.list1 = JSON.parse(localStorage.getItem('list1')) || []    this.list2 = JSON.parse(localStorage.getItem('list2')) || []    this.list3 = JSON.parse(localStorage.getItem('list3')) || []    this.list4 = JSON.parse(localStorage.getItem('list4')) || []},

操作&保留数据

groupInfoHandler(type){    // 0勾销 1确认    console.log('groupInfoHandler', arguments)    if(!type){    }else{        if(this.groupInfo.id){            var item = this.groupHash[this.groupInfo.id];            this.saveLog(2, `更新部门：${item.name} => ${this.groupInfo.name}`)            item.name = this.groupInfo.name        }else{            if(this.groupInfo.name.trim().length == ''){                return this.$message.error("请输出名称")            }            this.list1.push({                id:  (this.list1.length+1),                name: this.groupInfo.name            })            this.saveLog(2, `新增部门：${this.groupInfo.name}`)        }           localStorage.setItem('list1',JSON.stringify(this.list1))    }    this.groupInfo.dialogVisible = false;},