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')
  }

商品列表页面 index.vue

在element-ui 输入table
选择自己需要的组件 引入

html

    <template>
    <div class="products">
      <!-- <h1><router-link to="/new">商品列表首页</router-link></h1> -->
      <!-- <h1><router-link to="/edit">商品编辑</router-link></h1> -->
    <!-- 商品查询 -->

    <!-- 商品列表 -->
    <el-table :data="products" border style="width: 100%">
        <!-- 设置六个栏  序号、名字(name)、图片(scope.row.pic)、价格(price)、库存(amount)、操作-->
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <!-- 通过props传参 绑定name属性 从而获取新增列表页面的name参数 即获得新增列表页面的商品信息 -->
      <el-table-column type="text" label="名字" prop="name" width="180" align="center"></el-table-column>
      <el-table-column type="text" label="图片" width="200" align="center">
        <!-- 插槽 单独修饰图片的大小  -->
        <template slot-scope="scope">
          <img :src="scope.row.pic" style="width: 120px; max-height: 200px;" />
        </template>
      </el-table-column>
      <el-table-column type="text" label="价格" prop="price" align="center"></el-table-column>
      <el-table-column type="text" label="库存" prop="amount" align="center"></el-table-column>
      <el-table-column type="index" label=操作 width="120" align="center">
        <template slot-scope="scope">
          <!-- 编辑[editClickj]和删除[delClick] 使用插槽 -->
          <el-button @click="editClickj(scope.row)" size="small" type="text">编辑</el-button>
          <el-button @click="delClick(scope.row)" size="small" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增按钮 点击事件 -->
      <el-button @click="addHandle" style="margin-top:20px">商品新增</el-button>
    </div>
  </template>

js

        <script>
      export default {
        name: 'Products',
        //  商品数据
        data() {
          return{
            products: [],  // 获取新增页面的商品数据 在商品列表页面显示
            // query: ''
          };
        },
        // 渲染数据到页面上
        created() {
          // localStorage 存储数据
          //此处再转
          try {//获取存入商品到本地{从商品新增页面(new.vue)获取}
            if (localStorage.getItem('products')) {
              this.products = JSON.parse(localStorage.getItem('products'));
            }
            // 判断是否存入
          } catch (err){
            console.log(err)
          }
        },
            methods: {
              // 点击新增页面 跳转新增页面(new.vue)
            //点击新增 跳转新增页面(new.vue)
          addHandle() {
            this.$router.push({
              name: "New"
            });
          }
        }
      }
      </script>

商品新增 new.vue

在element-ui里引入form组件

html

    <template>
      <div class="new">
        <!-- 商品新增 -->
      <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!-- 五个小表单 名称(name)、图片(pic)、价格(price)、库存(amount)、操作按钮(保存和重置) -->
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-input v-model="ruleForm.pic"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="amount">
        <el-input v-model="ruleForm.amount"></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: '',
              pic: '',
              price: 0,
              amount: 0
            },
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              pic: [
                { required: true, message: '请输图片地址', trigger: 'blur' },
                { min: 30, message: '长度不低于20个字符', trigger: 'blur' }
              ],
              price: [
                { required: true, message: '请输入', trigger: 'blur' },
                { min: 1, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
              ],
              amount: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 1, max: 10000, message: '长度在 0 到 10000 个字符', 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
                this.list.push({
                  // 解析一下所有的数据
                  ...this.ruleForm,
                  // 传入当前商品id
                  id: Date.now()
                })
                // 通过id 将数据存入本地 通过列表页面获取
                  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();
          }
      }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容