Vue和element第四节，整体小demo测试

一、新建项目

按照昨天那篇文章即可https://javagoing.com/post/710.html

这里是这次demo的源码

https://gitee.com/upyadong/vue-element-demo01.git

新建好项目，这是建好的项目目录层级

名称	说明
build	项目构建的一些代码
config	开发环境的配置
node_modules	一些依赖包
src	源码，我们就在这个文件夹内写代码
static	静态文件
.babelrc	ES6编译的一些配置
.editorconfig	代码风格配置文件
.gitignore	git上传时忽略的一些文件，比如node_modules这个文
.postcssrc.js	听说是转换CSS样式的
index.html	入口页面
package-lock.json	听说是更详细的package.json
package.json	项目信息，项目名称，开发的依赖的记录等，一个JSON文件

打开package.json，找到devDependencies并在最后加上"element-ui": “^2.2.1”

打开main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

components目录下新建people.vue

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" 
                    v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作"><el-button  @click="deletePeople(index)">删除</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "People",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                this.dataList.push(newPeople);
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{
            people(val) {
                console.log("改变了people....")
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:[{
                    name: '张三',
                    age: 20,
                    sex: 'nv',
                    date:'2019-09-01'
                }]

            }
        }
    }
</script>
<style scoped>

</style>

打开router.js，添加路由

访问http://localhost:8080/people可以看到表单和数据列表

最后对按钮加上相应事件，即可完成这个基本效果

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" 
                    v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList"  align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  @click="deletePeople(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "People",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                console.log(this.dataList);
                this.dataList.push(this.newPeople);
                this.newPeople =  {name: '', age: null, sex: ''}
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{
            people(val) {
                console.log("改变了people....")
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:[{
                    name: '张三',
                    age: 20,
                    sex: 'nv',
                    date:'2019-09-01'
                }]

            }
        }
    }
</script>
<style scoped>

</style>

二、把数据存储在localStorage

我们在src内新建一个store文件夹，和App.vue、components同一个层级，在里面新建一个store.js，内容如下

const STORAGE_KEY = 'tabale-vuejs'//名字随便起
export default {//向往输出，以便组件接收
    fetch() {//我们定义的获取数据的方法
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
            || '[]')
    },
    save(items) {//我们定义的保存数据的方法
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}

getItem和setItem是window.localStorage的获取和保存数据的方法
我们用JSON.stringify和JSON.parse把数据转成字符串和解析，这样就方便我们写入tabledata
接下来我们添加新代码

我把people.vue复制一个新页面命名为people2.vue

然后router.js添加新路由

修改people.vue为

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList"  align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  @click="deletePeople(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Storage from '../store/store'//新添加，把刚写的localStorage导入
    export default {
        name: "People2",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                console.log(this.dataList);
                this.dataList.push(this.newPeople);
                this.newPeople =  {name: '', age: null, sex: ''}
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{//watch是vue的监听，一旦监听对象有变化就会执行相应操作
            //被监听的对象
            dataList: {
                handler(items) {
                    Storage.save(items)//新添加，监听对象变化后所做的操作，一个函数，保存数据
                },
                deep: true//深度监听，避免数据的嵌套层数太多，要使用深度监听，防止数据层级过多监听不到
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:Storage.fetch()

            }
        }
    }
</script>
<style scoped>

</style>

访问http://localhost:8080/people2