Element学习使用

目录

• 引入:
  • 测试使用
• 快速布局:
  • el-tabs标签页组件
  • el-table组件制作表格
  • el-button 按钮组件
  • 常用商品区域布局
  • 商品分类布局
  • 下拉框

引入:

• npm方式:

npm i element-ui -S
或:
cnpm install element-ui --save
要先整合cnpm
在项目中引入:
1.main.js
import ‘element-ui/lib/theme-chalk/index.css‘;
import ElementUI from ‘element-ui‘;
 Vue.use(ElementUI)

• 引入网址组件方式:

<!-- 引入样式 -->  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <!-- 引入组件库 -->  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

测试使用

Pos.vue里添加模版布局

<template>
  <div class="pos">
    <div>
        <el-row ><!--设置一行-->
            <el-col :span=‘7‘><!--设置列,比例7:17-->
            我是订单栏
            </el-col>
            <!--商品展示-->
            <el-col :span="17">
             我是产品栏
            </el-col>
        </el-row>
    </div>
  </div>
</template>
 
<script>
export default {
  name: ‘Pos‘,
  data () {
    return {
    }
  }
}
</script>
<style scoped>
</style>

解决100%高的问题
　　在页面中使用了Element组件，这样他会自动给我们生产虚拟DOM，我们无法设置高度100%；

　　这时候可以利用javascript，来设置100%高度问题。先要给我们的<el-col>标签上添加一个id，我们这里把ID设置为order-list。然后在vue构造器里使用mounted钩子函数来设置高度。

 mounted:function(){
      var orderHeight=document.body.clientHeight;//获取高度
      document.getElementById("order-list").style.height=orderHeight+‘px‘;//设置标签的高度
  },

快速布局:

el-tabs标签页组件

用Element里提供的el-tabs组件可以快速制作我们的tabs标签页效果

基本用法很简单，可以直接在模板中引入<el-tabs>标签，标签里边用<el-tab-pane>来代表每个每个标签页。

<el-tabs>
      <el-tab-pane label="点餐">
       点餐   
      </el-tab-pane>
      <el-tab-pane label="挂单">
      挂单
      </el-tab-pane>
      <el-tab-pane label="外卖">
      外卖
     </el-tab-pane>
</el-tabs>

细心的小伙伴会看到每个<el-tab-pane>里会有一个label属性，这个属性就是你标签页的标题。内容可以直接写在<el-tab-pane>里。

el-table组件制作表格

需要在订单的tab标签页里放入表格，把点选的食品放入到待结账列表里,可以使用Element的内置组件el-table。

<el-table  :data="tableData"  border show-summary style="width: 100%"  >
    <el-table-column prop="goodsName"  label="商品"  ></el-table-column>
    <el-table-column prop="count"  label="量"  width="50"></el-table-column>
    <el-table-column prop="price"  label="金额"  width="70"></el-table-column>
    <el-table-column  label="操作"  width="100"  fixed="right">
        <template scope="scope">
            <el-button type="text"  size="small">删除</el-button>
            <el-button type="text"  size="small">增加</el-button>
        </template>
    </el-table-column>
</el-table>

这里我们采用了五列布表格， 在第1行中的:data是用来绑定数据源的， border代表表格有边框效果。
tableData中的数据源的值，为了布局方便，所以我们进行了写死，以后会改成动态添加的数据。

tableData:  [{
    goodsName:  ‘可口可乐‘,
    price:  8,
    count:1
},  {
    goodsName:  ‘香辣鸡腿堡‘,
    price:  15,
    count:1
},  {
    goodsName:  ‘爱心薯条‘,
    price:  8,
    count:1
},  {
    goodsName:  ‘甜筒‘,
    price:  8,
    count:1
}]

el-button 按钮组件

需要在点餐表格的下方放入三个功能性按钮，分别是挂单按钮、删除按钮、结账按钮。同样使用Element里的组件，进行快速写入。el-button 的type属性是设置按钮样式的，为了学些和区分我们这里用三个属性来设置按钮。

<el-button type="warning" >挂单</el-button>
<el-button type="danger" >删除</el-button>
<el-button type="success" >结账</el-button>

常用商品区域布局

在<el-col :span=17>标签里增加一个层，然后在层内进行布局。因为里边的商品实际意义上是列表，所以用无序列表<li>来布局商品。

<div class="often-goods">
    <div class="title">常用商品</div>
    <div class="often-goods-list">
 
        <ul>
            <li>
                <span>香辣鸡腿堡</span>
                <span class="o-price">￥15元</span>
            </li>
 
        </ul>
    </div>
</div>

css样式

 .title{
       height: 20px;
       border-bottom:1px solid #D3DCE6;
       background-color: #F9FAFC;
       padding:10px;
   }
   .often-goods-list ul li{
      list-style: none;
      float:left;
      border:1px solid #E5E9F2;
      padding:10px;
      margin:5px;
      background-color:#fff;
   }
  .o-price{
      color:#58B7FF; 
   }

数据

oftenGoods:[
          {
              goodsId:1,
              goodsName:‘香辣鸡腿堡‘,
              price:18
          }, {
              goodsId:2,
              goodsName:‘田园鸡腿堡‘,
              price:15
          }, {
              goodsId:3,
              goodsName:‘和风汉堡‘,
              price:15
          }, {
              goodsId:4,
              goodsName:‘快乐全家桶‘,
              price:80
          }, {
              goodsId:5,
              goodsName:‘脆皮炸鸡腿‘,
              price:10
          }, {
              goodsId:6,
              goodsName:‘魔法鸡块‘,
              price:20
          }, {
              goodsId:7,
              goodsName:‘可乐大杯‘,
              price:10
          }, {
              goodsId:8,
              goodsName:‘雪顶咖啡‘,
              price:18
          }, {
              goodsId:9,
              goodsName:‘大块鸡米花‘,
              price:15
          }, {
              goodsId:20,
              goodsName:‘香脆鸡柳‘,
              price:17
          }
          
      ]

商品分类布局

<div class="goods-type">
    <el-tabs>
        <el-tab-pane label="汉堡">
            汉堡
        </el-tab-pane>
            <el-tab-pane label="小食">
            小食
        </el-tab-pane>
        <el-tab-pane label="饮料">
            饮料
        </el-tab-pane>
        <el-tab-pane label="套餐">
            套餐
        </el-tab-pane>
 
    </el-tabs>
</div>

制作商品的无序列表：

<ul class=‘cookList‘>
    <li>
        <span class="foodImg"><img src="http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg" width="100%"></span>
        <span class="foodName">香辣鸡腿堡</span>
        <span class="foodPrice">￥20.00元</span>
    </li>
</ul>

对无序列表进行CSS样式编写：

.cookList li{
       list-style: none;
       width:23%;
       border:1px solid #E5E9F2;
       height: auot;
       overflow: hidden;
       background-color:#fff;
       padding: 2px;
       float:left;
       margin: 2px;

   }
   .cookList li span{
        display: block;
        float:left;
   }
   .foodImg{
       width: 40%;
   }
   .foodName{
       font-size: 18px;
       padding-left: 10px;
       color:brown;

   }
   .foodPrice{
       font-size: 16px;
       padding-left: 10px;
       padding-top:10px;
   }

数据

引入图片

type0Goods:[
          {
              goodsId:1,
              goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",
              goodsName:‘香辣鸡腿堡‘,
              price:18
          }, {
              goodsId:2,
              goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
              goodsName:‘田园鸡腿堡‘,
              price:15
          }, {
              goodsId:3,
              goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
              goodsName:‘和风汉堡‘,
              price:15
          }, {
              goodsId:4,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
              goodsName:‘快乐全家桶‘,
              price:80
          }, {
              goodsId:5,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
              goodsName:‘脆皮炸鸡腿‘,
              price:10
          }, {
              goodsId:6,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
              goodsName:‘魔法鸡块‘,
              price:20
          }, {
              goodsId:7,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",
              goodsName:‘可乐大杯‘,
              price:10
          }, {
              goodsId:8,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
              goodsName:‘雪顶咖啡‘,
              price:18
          }, {
              goodsId:9,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
              goodsName:‘大块鸡米花‘,
              price:15
          }, {
              goodsId:20,
               goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
              goodsName:‘香脆鸡柳‘,
              price:17
          }
          
      ],

用v-for改造我们的无序列表：

<li v-for="goods in type0Goods">
    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
    <span class="foodName">{{goods.goodsName}}</span>
    <span class="foodPrice">￥{{goods.price}}元</span>
</li>

下拉框

<el-select placeholder="每页显示条数" class="pageSizeClass" v-model="pageSize">
  <el-option key="1" label="10条" value=10></el-option>
  <el-option key="2" label="20条" value=20></el-option>
  <el-option key="3" label="30条" value=30></el-option>
</el-select>

value默认是string,设置默认值的时候,默认值要转string(如果本来是数字的话)

this.pageSize=res.data.data.pageSize.toString();

Element学习使用

原文：https://www.cnblogs.com/ziyue7575/p/9481982.html