<template> <el-row> <el-col :xs="24" :sm="18" :md="14" :lg="10"> <label>姓名：</label> <el-input v-model="info.name" placeholder="请输入姓名"></el-input> <label>年龄：</label> <el-input v-model="info.age" placeholder="请输入年龄"></el-input> <label>性别：</label> <el-select v-model="info.sex" placeholder="请选择"> <el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 这里的key官方推荐在v-for时使用，不然会警告，但不影响使用 --> </el-select> <el-button @click="create" type="success">创建</el-button> <template> <el-table :data="tabledata"> <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 label="操作"> <template slot-scope="a"> <el-button size="mini" type="danger" @click="del(a.$index)">删除</el-button> </template> </el-table-column> </el-table> </template> </el-col> </el-row> </template> <script> import Storage from '../store/store' export default { name: "NewContact", data(){ return { info: { name: '', age: null, sex: '' }, options: [ '女','男','保密' ], tabledata: Storage.fetch() } }, methods: { create(){ this.tabledata.push(this.info) this.info = {name: '', age: null, sex: ''} }, del(index){ this.tabledata.splice(index,1) } }, watch:{ tabledata:{ handler(items){Storage.save(items)}, deep: true } } } </script> <style> #main{ float: none; margin: 0 auto; } .el-input{ padding-bottom: 5px; } .el-select { display: block; } .btn-auto{ width: 100%; margin-top: 12px; } </style>
这里是localStorage:
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)) } }
完成后我们要进行打包，方便直接在浏览器中运行
打开/config/index.js
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',//加了个. 避免生产路径的错误 /** * Source Maps */ productionSourceMap: false, //改为false
然后运行$ npm run build
等待完成，会生成dist文件夹，直接打开里面的index.html就可以在浏览器运行了
以上所述是小编给大家介绍的基于vue-cli、elementUI的Vue超简单入门小例子解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: