Element学习使用

news2024/10/6 16:26:45

引入:

  • 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-table-column
  type="selection"
  width="55"
  :selectable='checkboxInit'>

<!--checkboxInit是设置禁止选择的方法-->
//设置合计为不可选中状态
checkboxInit(row,index){
  if (index==this.tableData.length-1||index==this.tableData.length-2)//这个判断根据你的情况而定
  return 0;//不可勾选
  else
 return 1;//可勾选
},

在这里插入图片描述

表格选中方法
<!--表头设置-->
   <el-table
            :data="tableData" tooltip-effect="light"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">

//选择数据时触发的事件
handleSelectionChange(val){
    this.multipleSelection = val;
},

<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>  <el-button @click="toggleSelection()">取消选择</el-button>

toggleSelection(rows) {
    if (rows) { rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
        }); 
    } else {
        this.$refs.multipleTable.clearSelection();
    }
},

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();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1093188.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI智能助理系统在线提问系统 轻松解答，快速解决问题

AI智能助理系统在线提问系统 轻松解答，快速解决问题

今天给大家分享一款AI智能助理系统在线提问系统&#xff0c;也就是人工智能对话系统&#xff0c;&#xff0c;它可以陪你聊天&#xff0c;帮你写文章&#xff0c;帮你写论文&#xff0c;帮你写代码&#xff0c;帮你写小说&#xff0c;帮你创意策划&#xff0c;帮你做Excel表格&…
阅读更多...
联合和枚举！！详解

联合和枚举！！详解

目录 1. 1联合体类型的声明 1.2. 联合体的特点 1.3. 联合体⼤⼩的计算 1.4联合体有什么用&#xff1f; 1.5用联合体判断机器大小端。 2.1枚举类型 2.1.1枚举类型的声明 2.2枚举类型的优点 1. 1联合体类型的声明 和结构体类似&#xff0c;联合体也由成员变量组成&#x…
阅读更多...
《UnityShader入门精要》学习4

《UnityShader入门精要》学习4

一个最简单的顶点/片元着色器 一个最简单的顶点/片元着色器 Unity Shader的基本结构。它包含了Shader、Properties、SubShader、Fallback等语义块。顶点/片元着色器的结构与之大体类似 Shader "MyShaderName" {Properties {// 属性}SubShader {// 针对显卡A的S…
阅读更多...
安全隐患随手拍小程序搭建-人人都是安全员活动

安全隐患随手拍小程序搭建-人人都是安全员活动

各生产型企业都会组织开展“安全隐患随手拍”活动&#xff0c;目的就是使广大职工积极发现身边的安全隐患&#xff0c;从而提高自身安全意识&#xff0c;重视安全生产&#xff0c;营造“人人查安全、人人保安全”的良好氛围。 可传统靠微信群组或QQ邮箱上报隐患方式&#xff0c…
阅读更多...
Linux服务器快速搭建pytorch

Linux服务器快速搭建pytorch

Linux服务器搭建pytorch 文章目录 Linux服务器搭建pytorch一、使用FileZilla传输Anaconda二、激活Anaconda环境1.创建一个虚拟环境2.使用已有项目生成requirements.txt3.在虚拟环境中使用requirements.txt安装其他项目相关库 总结 一、使用FileZilla传输Anaconda 提示&#xf…
阅读更多...
微信小程序获取当前日期时间

微信小程序获取当前日期时间

一、直接使用方式 在小程序中获取当前系统日期和时间&#xff0c;可直接拿来使用的常用的日期格式 //1. 当前日期 YYYY-MM-DDnew Date().toISOString().substring(0, 10)new Date().toJSON().substring(0, 10)//2. 当前日期 YYYY/MM/DDnew Date().toLocaleDateString()//3.…
阅读更多...
计算机图形学（有效边表算法）用知识，改变命运的秘密【Morty深度干货】视频学习

计算机图形学（有效边表算法）用知识，改变命运的秘密【Morty深度干货】视频学习

目录 1.你所身处的世界&#xff0c;其实并非是一个真实的世界 3、哪些知识&#xff0c;会真正影响到我们的人生 你要用大量的精力去学习对于你的人生能产生实际价值的领域的知识 历史 经济学 金融与投资 心理学 永远不要去相信人&#xff0c;而是要去相信人性 成长的路…
阅读更多...
2023年中国禽流感疫苗产量、需求量及市场规模分析[图]

2023年中国禽流感疫苗产量、需求量及市场规模分析[图]

禽流感疫苗是以甲型流行性感冒病毒H5N1、H9N2等毒株经处理后制备的灭活疫苗。用于预防人感染高致病性禽流感病毒感染&#xff0c;控制禽流感的流行。 从产业链来看&#xff0c;禽流感疫苗行业上游为原材料市场&#xff0c;主要有非免蛋、血清、佐剂等。禽流感疫苗行业下游主要为…
阅读更多...
博客系统(java，MySQL，HTML)

博客系统(java，MySQL，HTML)

项目展示&#xff1a; 1.输入 http://127.0.0.1:8080/blog_system/login.html 即可进入登录页面 2.输入正确的用户名和密码后进入博客列表页 要是用户名或密码输入错误&#xff0c;会弹出错误提示框 3.点击查看全文&#xff0c;可以进入博客详情页查看详细信息 4.点击写博客&a…
阅读更多...
Studio One6.5中文版本下载安装步骤

Studio One6.5中文版本下载安装步骤

在唱歌效果调试当中&#xff0c;我们经常给客户安装的几款音频工作站。第一&#xff0c;Studio One 6是PreSonus公司开发的一款功能强大的音频工作平台&#xff0c;具有丰富的音频处理功能和灵活的工作流程。以下是Studio One6的一些主要特点&#xff1a; 1.多轨录音和编辑&…
阅读更多...
树模型（三）决策树

树模型（三）决策树

决策树是什么&#xff1f;决策树(decision tree)是一种基本的分类与回归方法。 长方形代表判断模块 (decision block)&#xff0c;椭圆形成代表终止模块(terminating block)&#xff0c;表示已经得出结论&#xff0c;可以终止运行。从判断模块引出的左右箭头称作为分支(branch)…
阅读更多...
lc42接雨水详解

lc42接雨水详解

1 42. 接雨水 接雨水 2 推荐阅读的解析 《接雨水》详细通俗的思路分析&#xff0c;多解法 推荐观看方法&#xff1a;二、三和四 3 不懂的地方-方法四的一个判断条件 以下是疑问的地方 height [ left - 1] 是可能成为 max_left 的变量&#xff0c; 同理&#xff0c;height…
阅读更多...
隧道代理-

隧道代理-

文章目录 代理代理使用场景VPS建立隧道frpMSF木马生成监听开启frp服务端和客户端执行exe木马文件 代理 实验环境&#xff1a; 攻击机kali&#xff1a;192.168.160.32&#xff08;NAT模式&#xff09;模拟的公网服务器&#xff08;本机&#xff09;&#xff1a;10.9.75.214失陷…
阅读更多...
SQL Server远程登录失败

SQL Server远程登录失败

SQL Server远程登录失败 检查SQL SERVER 是否允许远程访问. 具体步骤: 1)在远端SQL Server主机上,打开SSMS并连接数据库 2)在相应”数据库”上单击右键,选择”属性” 3)选择”连接”选项卡,检查”远程服务器连接”下,RPC服务是否选择. 设置SQL Server相关TCP连接 1.打开SQL Se…
阅读更多...
代码随想录算法训练营第天十六天丨 二叉树part04

代码随想录算法训练营第天十六天丨 二叉树part04

文档讲解&#xff1a;代码随想录 状态&#xff1a;已完成 513.找树左下角的值 思路 递归 分析一下题目&#xff1a;在树的最后一行找到最左边的值。 首先要是最后一行&#xff0c;然后是最左边的值。 如果使用递归法&#xff0c;如何判断是最后一行呢&#xff0c;其实就是…
阅读更多...
为数据列表的每条记录生成对应的二维码

为数据列表的每条记录生成对应的二维码

效果图&#xff1a; 一、前端 <!DOCTYPE html> <html lang"zh" xmlns:th"http://www.thymeleaf.org" xmlns:shiro"http://www.pollix.at/thymeleaf/shiro"> <head><th:block th:include"include :: header(固定资产…
阅读更多...
CA与区块链之数字签名详解

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名&#xff0c;首先&#xff0c;我们看一下什么是数字签名&#xff01; 数字签名 数字签名是公钥密码学中的一种技术&#xff0c;用于验证信息的完整性和发送者的身份。简而言之&#xff0c;数字签名是一种确认信息来源和信息完整性的手段。它通…
阅读更多...
沉睡的木乃伊：var_export() 与可解析字符串

沉睡的木乃伊：var_export() 与可解析字符串

文章目录 参考环境var_export()概念应用场景数据持久化调试 函数 var_export() 自定义类__set_state() 魔术方法设置 __set_state 魔术方法的逻辑以复原对象注意事项 通用内置空类 stdClassstdClass对 __set_state() 的天然支持 参考 项目描述搜索引擎Bing、GoogleAI 大模型文…
阅读更多...
UI自动化测试 —— Jenkins配置

UI自动化测试 —— Jenkins配置

前一段时间帮助团队搭建了UI自动化环境&#xff0c;这里将Jenkins环境的一些配置分享给大家。 背景&#xff1a; 团队下半年的目标之一是实现自动化测试&#xff0c;这里要吐槽一下&#xff0c;之前开发的测试平台了&#xff0c;最初的目的是用来做接口自动化测试和性能测试&…
阅读更多...
数睿通2.0：高效的数据处理，主数据与数据表功能全面升级

数睿通2.0：高效的数据处理，主数据与数据表功能全面升级

引言 八天很短&#xff0c;七天很长&#xff0c;数睿通 2.0 数据中台也随之迎来了新一轮的版本迭代&#xff0c;本次更新主要包括&#xff1a; 主数据模型&#xff08;可视化建模&#xff09;主数据派发&#xff08;支持派发主数据到下游数据表&#xff0c;rabbitMq&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023