Vue组件库 (一)：Element常用组件

news2025/11/2 16:31:26

Element基于Vue2.0的桌面端组件库

组件：组成网页的部件。例如超链接、图片、按钮等。

一、环境配置

1、下载element

在vscode工程终端下下载。一定要注意：是在工程下安装！

npm install element -ui@2.15.3

出现以下问题：

经判断可能为npm版本(9.6.7)太高原因，使用如下命令即可解决

npm install --legacy-peer-deps element-ui --save

在 node_modules文件下会增加element-ui文件，此时安装成功

2、引入ElementUI组件库

在入口文件中引用 main.js中

import Element form 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、访问官网、复制组件代码，调整

在main.js入口文件引用完成后，在views文件夹下创建文件element用来存放element组件，其中App.vue为根组件。在element文件夹下新建ElementView.vue文件。

在前端服务开启后，默认的展示根组件的内容即App.vue。

在App.vue根组件下引用ElementView.vue文件如下操作：

直接下App.vue根组件下输入<element-view></element-view>，vscode将自动导入elementview.vue的组件

 以下组件的测试均在ElementView.vue中进行

二、Table组件 

直接复制element官网上代码即可

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <br><br>
    <!-- table表格 -->
    <!-- shift alt f整理代码 -->
    <!-- prop要展示的数据 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" 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>


<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style>
</style>

 

 三、分页组件

Pagination分页：当数据量过多时，使用分页分解数据。

<!-- pagination分页组件 -->
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  • layout组件布局，子组件名用逗号分隔
  • background 是否为分页按钮添加背景色

layout可选值：'prev, pager, next, jumper, sizes, total'

 

 

 在标签中添加该两个事件：

 size-change事件函数名为handleSizeChange

 current-change事件函数名为handleCurrentChange

  <el-pagination background layout="sizes, prev, pager, next,jumper,total" 
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
    :total="1000">   
   
    </el-pagination>

在vue中添加事件：

两个函数之间要用“,”隔开，参数为val，即修改后的值

 methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化"+val);
    },

    handleCurrentChange:function(val){
        alert("页码数变化"+val);

    }   
  }

 改变每页记录10--->20

 改变页码数

 

四、对话框组件

保留当前页面信息，弹出一个对话框。

<!-- Dialog对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >
 <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

js部分 

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
            },
        };
},
};
</script>

在html中：:data="gridData"定义了数据的来源，即来自于vue对象的数据模型，名称为gridData。

visible.sync="dialogTableVisible"，visible.sync该属性用来控制是否对表格展示，其属性值为

dialogTableVisible，当dialogTableVisible = true时显示，否则隐藏。

在vue对象中dialogTableVisible的值默认为隐藏(false)，当被点击后，值变为true。即如下代码：；

 <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

五、表单组件

Form表单：由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据。

使用对话框形式弹出form表单

1、创建form表单的对话框

默认不显示form表单，只有在点击后才会显示

  <!-- Dialog对话框 展示表单 -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开Form的 Dialog</el-button>

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible"></el-dialog>

2、创建form表单

 <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

 el-form-item创建表单项目，并且属性使用v-model绑定数据--->vue->data->form

3、创建form表单的数据模型，并添加onSumbit方法

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
           },
          };
        },
   methods: {
   onSubmit:function(){
        alert(JSON.stringify(this.form));
   }
 },
} ;
</script>

当提交表单后，显示输入的内容，注意：此时不能直接打印this.form因为它只是个对象，需将其转换为字符串再输出，即使用JSON.stringify方法。

JSON.stringify(this.form)

 

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

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

相关文章

基于Spring Boot的机场VIP客户管理系统的设计与实现（Java+spring boot+MySQL）

基于Spring Boot的机场VIP客户管理系统的设计与实现（Java+spring boot+MySQL）

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的机场VIP客户管理系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java s…
阅读更多...
泰迪大数据挖掘建模平台功能特色介绍

泰迪大数据挖掘建模平台功能特色介绍

大数据挖掘建模平台面相高校、企业级别用户快速进行数据处理的建模工具。 大数据挖掘建模平台介绍 平台底层算法基于R语言、Python、Spark等引擎&#xff0c;使用JAVA语言开发&#xff0c;采用 B/S 结构&#xff0c;用户无需下载客户端&#xff0c;可直接通过浏览器进行…
阅读更多...
水库信息化综合管理系统解决方案

水库信息化综合管理系统解决方案

一、系统概述 水库综合信息化管理系统主要对水库坝址以上流域、工程本身、下游受益区及相关区的实时气象、水情、工情、旱情、洪涝灾情&#xff0c;以及社会经济和自然环境等信息自动化实时采集&#xff0c;构建一站式的水库信息公共平台&#xff0c;通过多功能完善的系统软件和…
阅读更多...
C# Windows登录界面进行截图，控制鼠标键盘等操作实现（一）

C# Windows登录界面进行截图，控制鼠标键盘等操作实现（一）

首先常规的账户进程是没办法获取登录界面的信息的&#xff0c;因为登录界面已经不在某个账户下了&#xff0c;登录界面显示了每一个账户的切换。所以得使用System权限的进程。 那么Windows系统究竟是怎么将登录界面与用户桌面隔离开的呢&#xff1f;首先先通过一些Windows操作系…
阅读更多...
Linux系统编程4（进程信号详解）

Linux系统编程4（进程信号详解）

你知道为什么当程序中出现除0就会引发程序崩溃退出吗&#xff1f;你知道为何在Linux中输入kill -9 pid 就能杀死进程id为pid的进程吗&#xff1f;这篇文章将详细探讨解答这些问题&#xff0c;文章内容比较长&#xff0c;大家可以收藏慢慢看 什么是信号 在进程间通信这篇文章中…
阅读更多...
一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3（踩坑亲测、附流程截图）

一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3（踩坑亲测、附流程截图）

一、目的 由于kettle的任务需要用到Hadoop&#xff08;HDFS&#xff09;&#xff0c;所以就要连接Hadoop服务。 之前使用的是kettle9.3&#xff0c;由于在kettle新官网以及博客百度等渠道实在找不到shims的驱动包&#xff0c;无奈换成了kettle9.2&#xff0c;kettle9.2的安装…
阅读更多...
【Apollo学习笔记】—— Planning模块

【Apollo学习笔记】—— Planning模块

前言 本文记录学习planning模块时的一些笔记&#xff0c;总体流程参照https://zhuanlan.zhihu.com/p/61982682中的流程图&#xff0c;如上图所示。 planning_component modules/planning/planning_component.cc PlanningComponent::Init部分首先完成规划模式的选择&#xff…
阅读更多...
ArcGIS 利用cartogram插件制作变形地图

ArcGIS 利用cartogram插件制作变形地图

成果图 注&#xff1a;本图数据并不完全对&#xff0c;只做为测试用例 操作 首先需要下载一个插件cartogram 下载地址在这里 https://www.arcgis.com/home/item.html?idd348614c97264ae19b0311019a5f2276 下载完毕之后解压将Cartograms\HelpFiles下的所有文件复制到ArcGIS…
阅读更多...
LeetCode(力扣)257. 二叉树的所有路径Python

LeetCode(力扣)257. 二叉树的所有路径Python

LeetCode257. 二叉树的所有路径 题目链接代码 题目链接 https://leetcode.cn/problems/binary-tree-paths/ 代码 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.…
阅读更多...
ChatGPT成为工作工具，具体都应用在哪些地方？

ChatGPT成为工作工具，具体都应用在哪些地方？

Verified Market Research估计&#xff0c;到2030年&#xff0c;人工智能写作辅助软件市场将达到约65亿美元&#xff0c;复合年增长率为27%。生成式人工智能的浪潮正在席卷世界各地的营销部门。 Botco对美国1000名工作人员进行的调查发现&#xff0c;73%的人表示他们会利用生成…
阅读更多...
IO流 详细介绍

IO流 详细介绍

一、IO流概述 1.IO&#xff1a;输入(Input读取数据)/输出(Output写数据) 2.流&#xff1a;是一种抽象概念&#xff0c;是对数据传输的总称,也就是说数据在设备间的传输称为流&#xff0c;流的本质是数据传输IO流就是用来处理设备间数据传输问题的。 3.常见的应用&#xff1a…
阅读更多...
SQL两张表数据对比

SQL两张表数据对比

表1&#xff1a; 表2&#xff1a; 1、查询两表的数据差异&#xff1a; # 查询表1中有但表2没有的数据 SELECT DATA FROM data1 WHERE ( DATA ) NOT IN ( SELECT DATA FROM data2 );# 查询表2中有但表…
阅读更多...
MySQL系统变量 会话变量，用户变量

MySQL系统变量 会话变量，用户变量

系统变量 分类 全局系统变量需要添加 global 关键字&#xff0c;有时把全局系统变量简称 全局变量 会话系统变量需要添加 session 关键字&#xff0c;有时也把会话系统变量称为 local 变量 局部变量 如果不写&#xff08;global、session&#xff09;默认会话级别。 静态变量在…
阅读更多...
LeetCode[56]合并区间

LeetCode[56]合并区间

难度&#xff1a;Medium 题目&#xff1a; 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&…
阅读更多...
Practices11|41. 缺失的第一个正数(数组)、73. 矩阵置零（矩阵）

Practices11|41. 缺失的第一个正数(数组)、73. 矩阵置零（矩阵）

41. 缺失的第一个正数(数组) 1.题目&#xff1a; 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xf…
阅读更多...
用于智能图像处理的计算机视觉和 NLP

用于智能图像处理的计算机视觉和 NLP

莫斯科&#xff0c;神秘之城...&#xff08;这张照片由伊戈尔沙巴林提供&#xff09; 一、说明 如今&#xff0c;每个拥有智能手机的人都可能成为摄影师。因此&#xff0c;每天都有大量新照片出现在社交媒体、网站、博客和个人照片库中。尽管拍照的过程可能非常令人兴奋&#x…
阅读更多...
在ubuntu+cpolar+rabbitMQ环境下，实现mq服务端远程访问

在ubuntu+cpolar+rabbitMQ环境下，实现mq服务端远程访问

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…
阅读更多...
零信任架构演进与实践：探讨零信任安全模型在不断发展的背景下的最新趋势和实际应用案例

零信任架构演进与实践：探讨零信任安全模型在不断发展的背景下的最新趋势和实际应用案例

随着信息技术的迅猛发展&#xff0c;企业的网络安全面临着日益复杂的挑战。传统的网络安全模型已经不再适用于如今的威胁环境&#xff0c;因此&#xff0c;零信任架构应运而生。零信任安全模型基于"从内部出发&#xff0c;不信任网络&#xff0c;不信任用户"的理念&a…
阅读更多...
FirmAE 工具安装（解决克隆失败 网络问题解决）

FirmAE 工具安装（解决克隆失败 网络问题解决）

FirmAE官方推荐使用Ubuntu 18.04系统进行安装部署&#xff0c;FirmAE工具的安装部署十分简单&#xff0c;只需要拉取工具仓库后执行安装脚本即可。 首先运行git clone --recursive https://kgithub.com/pr0v3rbs/FirmAE命令 拉取FirmAE工具仓库&#xff0c;因为网络的问题&…
阅读更多...
非常详细的 Ceph 介绍、原理、架构

非常详细的 Ceph 介绍、原理、架构

1. Ceph架构简介及使用场景介绍 1.1 Ceph简介 Ceph是一个统一的分布式存储系统&#xff0c;设计初衷是提供较好的性能、可靠性和可扩展性。 Ceph项目最早起源于Sage就读博士期间的工作&#xff08;最早的成果于2004年发表&#xff09;&#xff0c;并随后贡献给开源社区。在经过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023