vue初始化一个项目
vue create 项目名【element-ui-form】
cd 项目名【element-ui-form】
npm run serve 运行
安装element-ui框架
npm install --save element-ui
在main.js里面引入element-ui和
// 引入两个element-ui文件 ElementUI和index.css
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 全局使用ElementUI
Vue.use(ElementUI)
删除home.vue/about.vue或者修改roter里面的index.js[about和home]
删除router文件夹下的home.vue和about.vue
在router文件夹里添加新的内容【index.vue和new.vue】商品列表和新增列表
{//商品列表
path: '/',
name: 'Products',
component: () => import('../views/form/index.vue')
},
{//商品新增
path: '/new',
name: 'New',
component: () => import('../views/form/new.vue')
},
{// 商品编辑
path: '/edit/:id',
name: 'Edit',
component: () => import('../views/form/edit.vue')
}
商品新增页面 new.vue
在element-ui 输入table
选择自己需要的组件 引入
html
新增列表
立即创建
重置
js
export default {
name: 'New',
data() {
return {
list: [],
ruleForm: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输商品名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 15 个字符', trigger: 'blur' }
]
}
};
},
created() {
this.list = [];
try{
if(localStorage.getItem('products')){
this.list = JSON.parse(localStorage.getItem('products'))
}
}catch(err){
console.log(err)
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// alert('submit!');
this.list.push({
...this.ruleForm,
id: Date.now()
})
localStorage.setItem('products', JSON.stringify(this.list));
this.$router.push({
name: 'Products'
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
商品列表 index.vue
在element-ui里引入form组件
html
商品列表
商品新增second
:data="products"
style="width: 100%">
type="index"
label="序号"
width="180">
prop="name"
label="商品名称"
width="180">
prop="address"
label="地址">
js
export default {
name: 'Products',
data() {
return{
products: []
}
},
created() {
try{
if(localStorage.getItem('products')){
this.products = JSON.parse(localStorage.getItem('products'))
}
}catch(err){
console.log(err)
}
}
}