程序员大阳

本文目录1. 用途2. 数据绑定2.1 固定选项2.2 选项绑定数组3. 功能效果3.1 可清空选项3.2 多选3.3 可搜索4. 事件响应5. 小结1. 用途el-select即选择器，用于从若干个候选项中选择其中一个(或者多个)。在传统网页开发中，选择器经常被称作下拉框、下拉列表，是最常用的表单元素之一。2. 数据绑定el-select的数据可以来源于固定的若干个选项，或者通过v-for绑定一个数组。2.1 固定选项固定选项时，选中项的value与selectedValue双向绑定。 数

1. 用途输入框是使用非常多的元素，用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框，本篇就来了解下。2. 输入框输入框为el-input，其编译后生成的HTML元素为input，样式class中包含el-input，所以我们首先设定下统一样式，便于演示。.el-input { width: 200px;}2.1 输入框基本功能输入框可以与js变量双向绑定，代码为： 输入框基本功能：双向绑定 <el-input v-model="input1

1. 用途单选框使用的场景非常普遍，用于列出多个选项，供用户选择其中一个。注意Select选择器也可以从多个选项中选择一个，单选框的优势是可以在界面上同时显示所有选项，缺点是选项多时占用空间大。而选择器优势是占用空间小(选项下拉选择时才显示)，缺点是必须要下拉时才能显示所有选项。2. 单选框单选框HTML代码如下： <el-radio v-model="radio1" label="male">男</el-radio> <el-radio v-model="

本文目录1. 前言2. 基本用法3. 设置默认时间4. 选择范围5. 设置默认起止时刻6. 小结1. 前言之前我们已经讲述了时间选择器，日期选择器的用法。Element还提供了集日期时间与一体的选择器，即日期时间选择器，用于同时选择日期时间的场景。2. 基本用法代码如下： 基本用法，选择任意日期时间：{{value1}} <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" value-forma

1. 背景Element Vue是基于Vue 2.0的桌面端组件库，目前非常流行。可以说是国内目前最主流的Vue桌面组件库，具备非常完善的组件和高度灵活的特性，相当值得学习使用。本篇来说下Element开发环境的配置。2. 安装使用npm安装即可，命令为npm i element-ui -S。3. 引入安装完成后，需要在Vue项目中引入，建议直接完整引入ElementUI的全部功能。修改main.js文件如下：import Vue from 'vue';import ElementUI f

本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6. 小结1. 前言表单是使用频率非常高的组件了，HTML默认提供的表单是没啥样式的，而Element对表单提供了封装形成了el-form组件，使整个表单的样式整齐划一。本篇就来介绍下表单的使用，主要介绍的是样式方面的使用。2. 基本用法代码： 基本用法： <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd

本文目录1. 概述2. 值绑定2.1 默认值绑定2.2 指定绑定值3. 外观3.1 修改颜色3.2 修改显示文本4. 状态变化事件1. 概述开关就是从两个选项中切换，其实也可以用单选按钮/复选框实现切换功能，但是开关有一个动态的切换效果，在某些场景用起来效果更佳。2. 值绑定2.1 默认值绑定开关默认绑定布尔值，true、false分别对应开关的两个状态。默认绑定布尔值 <el-switch v-model="boolValue"> </el-switch&gt

本文目录1. 概述2. 数据绑定2.1 默认数据绑定1. 概述级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。2. 数据绑定2.1 默认数据绑定级联选择器默认会绑定一个数组，节点的显示文本和值分别对应label、value属性，节点的后代对应children属性。示例代码如下： 默认数据绑定,选中值{{value}

现象使用了el-table组件后，想根据不同的条件显示不同的列，例如：<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-if="type==1" prop="date" label="...

点此查看全部文字教程、视频教程、源代码1. 前言标签经常用来描述对象的一个、或者多个同类属性。例如描述用户的爱好，描述用户拥有的角色。el-tag提供了动态删除、新增标签的功能，所以非常适合使用在动态处理用户属性的场景。2. 基本用法代码如下： 基本用法<br> <el-tag>篮球</el-tag>使用el-tag即可创建一个标签，效果如下：3. 调整颜色通过type属性可以调整标签颜色： 调整颜色<br> &lt

1. 背景由于一般的网页布局，也就是分个侧边导航栏，顶部标题栏，中间内容区域，以及底部版权信心栏。element为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。2. 全局样式为了让网页的布局占满屏幕，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。 <style> html,body,#app{ height:100%; margin: 0px; paddi

点此查看全部文字教程、视频教程、源代码1. 前言进度条通常用于展示页面加载进度，或者某项任务的完成进度，说实话，在网站开发领域，用的不算多。本篇，我们来了解下el-progress进度条的常见用法。2. 基本用法如下代码： 基本用法 <el-progress :percentage="50"></el-progress>el-progress表示一个进度条组件，percentage属性指定了进度百分比值，达到100时表示全部完成，所以50就是一半，所以效果如

更多相关博文请查看【Element 组件使用合集】本文目录1. 前言2. 基本用法2.1 前端部分2.2 后端部分2.3 获取后端返回信息3. 外观功能介绍3.1 拖拽上传3.2 显示图片3.3 设置文件列表样式3.4 显示提示信息4. 事件功能介绍4.1 限制上传文件数量4.2 限制上传文件类型和大小4.3 移除文件处理4.4 手动上传5. 附带参数6. 附带请求头部7. 小结1. 前言本篇文章的标题，应该是我写过的，关于Element组件介绍的文章里面，最长的一个了。无它，就是因为这个组件确实使

1. 背景element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。2. 分栏布局首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。如下代码，即为将1行等分为2列，为了便于区分列，我们为列

本文目录1. 概述2. 选择任意时间3. 默认时间设置4. 时间格式设置5. 指定可选时间段6. 选择时间点7. 时间选择变化事件1. 概述通过Element提供的时间选择器进行时间输入，是非常简单高效的，本篇来介绍下时间选择器常见用法。2. 选择任意时间使用el-time-picker标签即可创建任意时间选择器，选中的值会绑定value。选择任意时间： <el-time-picker v-model="value" placeholder="选择时间"> </e

1. 背景按钮是很常用的，Element的按钮功能还是比较全面的，本篇就来介绍下。先看下各种按钮的效果图：2. 按钮分类el-button按钮的分类基本是靠颜色区分的，另外还有一种文本按钮type="text"，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。 按钮分类： <el-button>默认</el-button> <el-button type="primary">primary</el-button>

1. 问题表现使用ElementUI的el-table后，偶然发现出现行列错位、对不齐问题。还有一种列对不齐的，没找到截图，反正就是表格错乱。2. 问题发现实际上为了让表格可以垂直滚动造成的，添加了如下代码，对原生样式造成了影响。.el-table { overflow-y: auto !important;}3. 问题处理直接在el-table外围添加一个div，然后固定div的高度让其垂直滚动即可。...

本文目录1. 前言2. 基本用法3. 带默认值4. 调整尺寸5. 小结1. 前言颜色选择器，说实话比较冷门，我也没有在实际项目中用过。仔细想了想，如果开发的网站比较高端，可以增加一个自定义主题功能，可以自定义导航栏、菜单栏的文本颜色、背景色之类的，此时就用到颜色选择器了。本篇就来介绍下，如何使用Element的颜色选择器。2. 基本用法代码如下： 基本用法:{{value1}} <el-color-picker v-model="value1" @change="selectCh

el-table固定表头非常简单，只要给添加height属性即可。<el-table height="250"></el-table>如果想让表格占满当前高度，必要前提时让父元素的高度先撑满当前高度。<div style="height:100%"> <el-table height="100%"></el-table></div>而有些情况下，设置height为100%只能保证固定表头，高度无法占满，此时可以尝试使用。

本文目录

更多相关博文请查看【Element 组件使用合集】本文目录1. 前言2. 基本用法3. 显示斑马纹4. 显示边框5. 自定义尺寸6. 显示索引7. 显示内容过长时的提示8. 自定义行样式9. 固定表头10. 固定列11. 多级表头12. 展开行13. 自定义列模板14. 单选15. 多选16. 前端排序17. 小结1. 前言如果是开发功能型的网站，例如各类信息管理系统，那么表格的使用频率会相当之高。实际上，我们的数据存储到数据库，不就是以表格的形式存在吗？所以在界面上显示、操作，使用表格来处理也是非

1. 背景使用图标可以使我们的系统界面更加的炫酷美妙，Element也提供了一些常用的图标可以直接拿来使用。2. 使用方式第1种方式通过class样式使用，如下即显示了一个搜索图标。注意图标是以el-icon-开头的，后面的单词表示图标的含义。 <i class="el-icon-search"></i>此时同样可以将图标放入按钮中。 <el-button type="primary"><i class="el-icon-search">&

本文目录1. 前言2. 基本用法3. 显示分值4. 辅助文本5. 只读6. 小结1. 前言评分组件主要使用在客户评价场景，例如客户对店铺进行打分。本篇来介绍下评分组件的用法。2. 基本用法 基本用法:{{value1}} <el-rate v-model="value1" @change="rateChange"> </el-rate> methods: { rateChange(value) { console.log(value

本文目录1. 前言2. 基本用法3. 可搜索4. 自定义标题和按钮的文本5. 设置数据项别名6. 小结1. 前言穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。2. 基本用法先看代码： 基本用法:{{value}} <el-transfer v-model="value" :data="preData" @change="selectChange"></el-tran

1. 用途多选框用来从备选的选项中选择任意多个，0个或者全部均可。注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。2. 普通多选框普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下：HTML代码： 普通多选框： <el-checkbox v-model="checkedBasketball">篮球</el-checkbox>

1. 用途计数器是一种特殊的输入框，用来输入数字。除了可以直接键盘输入外，还支持通过按钮对数字进行调整。2. 基本用法如下示例，计数器显示数字绑定变量后，可以直接通过+/-按钮调整数值。 基本用法 <el-input-number v-model="num1" label="请输入数量"></el-input-number> <el-divider></el-divider>效果：3. 指定最大、最小值可以为计数器指定数值的最