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

  <template>
  <div class="new">
    <h1><router-link to="/new">新增列表</router-link></h1>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

js

  <script>
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();
      }
    }
}
</script>

商品列表 index.vue

在element-ui里引入form组件

html

  <template>
    <div class="products">
      <h1><router-link to="/new">商品列表</router-link></h1>
      <h1><router-link to="/second">商品新增second</router-link></h1>
      <el-table
        :data="products"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </template>

js

  <script>
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)
      }
    }
  }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从V...
    晏辉_e7c6阅读 2,953评论 0 31
  • element-ui 文档 Vue项目接口文档地址 博客 session 和 cookie等 学什么? 1 如何使...
    cj_jax阅读 3,974评论 0 10
  • vue初始化一个项目 安装element-ui框架 在main.js里面引入element-ui和 删除home....
    DreamofLimb阅读 3,449评论 0 1
  • 国庆五天假,我选择出来跑,没有特别的出行目的,仅仅是为了换个环境生活几天。 目的地我选择了熟悉的太原,与我...
    偷懒的小狮阅读 276评论 0 1
  • 1.感恩今天阳光明媚。又是可以坐在公交车上晒太阳,微微仰起头,让阳光洒在脸上。车上人不多,很悠闲自在的公车时光。 ...
    小easy阅读 202评论 0 4