java element 函数_Element学习使用

引入:

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)

引入网址组件方式:

测试使用

Pos.vue里添加模版布局

我是订单栏

我是产品栏

export default {

name: 'Pos',

data () {

return {

}

}

}

解决100%高的问题

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

这时候可以利用javascript，来设置100%高度问题。先要给我们的标签上添加一个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标签页效果

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

点餐

挂单

外卖

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

el-table组件制作表格

需要在订单的tab标签页里放入表格，把点选的食品放入到待结账列表里,可以使用Element的内置组件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属性是设置按钮样式的，为了学些和区分我们这里用三个属性来设置按钮。

挂单

删除

结账

常用商品区域布局

在标签里增加一个层，然后在层内进行布局。因为里边的商品实际意义上是列表，所以用无序列表来布局商品。

常用商品

• 香辣鸡腿堡

  ￥15元

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

}

]

商品分类布局

汉堡

小食

饮料

套餐

制作商品的无序列表：

• 

  香辣鸡腿堡

  ￥20.00元

对无序列表进行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改造我们的无序列表：

{{goods.goodsName}}

￥{{goods.price}}元

下拉框

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

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