element ui html,element-ui简洁版

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)

}

}

}