hrbsfdxzhq01的博客

一、典型表单在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePickermodel:表单数据对象，object格式label-width 表单域标签文本的宽度，作为 Form 直接子元素的 form-item 会继承该...

<!--Popover 弹出框Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popo...

<!--设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。--><div class="blo...

一、固定时间点提供几个固定的时间点供用户选择使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长el-time-select类似下拉框，选择有限<el-time-select v-model="value1" :picker-options="{ start: '08:30', step: '00...

DatePicker 日期选择器：用于选择或输入日期1、基本单位由type属性指定。type=date时type：显示类型，默认date，year/month/date/dates（可以选择多个日期）/ week/datetime/datetimerange/daterange <el-date-picker v-model="value1" type="...

一、 日期和时间点DateTimePicker 日期时间选择器,在同一个选择器里选择日期和时间通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。<div class="block"> <span class="demonstration">默认</span>...

用于页面中展示重要的提示信息。<!--Alert 组件提供四种主题，由type属性指定，默认值为info。--> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="inf

<div id="app"> <el-button plain @click="open"> 可自动关闭 </el-button> <el-button plain @click="open2"> 不会自动关闭 </el-button>&amp

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下像open4那样直接调用。 ...

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。1、消息提示当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。调用$alert方法即可打开消息...

 <!--导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。--><div id="app"> <el...

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。层级分析：第一列日期；第二列配送信息                  配送信息列：嵌套姓名2列；嵌套地址三列                  地址列：嵌套省份3列、市区4列、地址5列、邮编6列 &lt...

若表格展示的是各类数字，可以在表尾显示各列的合计。1、show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。2、你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计...

1.html部分:<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm"> <el-form-item label="联系电话:" prop="buyerPhone" req

参考：https://blog.csdn.net/qq_29468573/article/details/80742646 element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义：objectSpanMethod({ row, c...

在我们引入elementUI的时候，一般是两种方式：npm安装或者在script直接引入；当然，在script直接引入的时候，我们也可以通过直接指定版本的方式，达到锁定版本的效果。<script src="//unpkg.com/element-ui@2.4.6/lib/index.js"></script>直接引入是从外网引入，每次加载都是读取外部网站，我...

<!--Tooltip 文字提示常用于展示鼠标 hover 时的提示信息。使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提...

1、基本使用v-model：绑定的值，string / numbersize：指定输入框的尺寸，除了默认的medium大小外，还提供了 large、small 和 mini 三种尺寸。输入框尺寸，只在type!="textarea"时有效；仅控制高度，所以这里使用style控制了宽度clearable：是否可清空，boolean <el-input style=...

el-radio的 label属性是该 radio 对应的值，若该标签中无内容，则该属性也充当 radio 按钮后的介绍。 <!--要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。--><el-radio v-model="radio" la...

<!--单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。--><el-checkbox v-model="checked">备选项</el-checkbox>data() ...

<!--通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。action：必选，上传的地址on-preview 点击文件列表中已上传的文件时的钩子 function(file)on-remove 文件列表移除文件时的钩子 functio...

Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。1、基本使用Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value（v-model） 属性来指定当前选中的标签页。el-tabs1、v-model绑定的变量值（与tab-pane的name属性对应）决定哪个选项卡选中2、tab-click事件：tab 被选中时触发    回调参数是被选中的标签 tab ...

一、基本使用v-model：绑定变量，变量的初始值即为默认值。size：额外提供了 medium、small、mini 三种尺寸的数字输入框controls-position ：可以控制按钮位置，可选值right，并没有leftcontrols：是否使用控制按钮，布尔类型，默认truedisabled：禁用状态<el-input-number v-mod...

 <!--由type属性来选择tag的类型，也可以通过color属性来自定义背景色。--><el-tag>标签一</el-tag><el-tag type="success">标签二</el-tag><el-tag type="info">标签三</el-tag>

<!--绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。--><el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>&lt

一、Icon图标<!--直接通过设置类名为 el-icon-iconName 来使用即可--><i class="el-icon-edit"></i><i class="el-icon-share"></i><i class="el-icon-delete">&amp

一、基础布局通过基础的 24 分栏，迅速简便地创建布局。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col&amp

实际使用：v-loading为true时，会出现白色遮屏效果。贷款产品管理列表页中（loan.vue）：v-loading绑定到整个div中。a、默认初始requireLoading为false，点击下架confirm确认后，设为true；b、updateProductInfo更新完数据库下架状态后，再恢复为false                                ...

1、基本使用v-model：当前被选中的el-option的 value 属性值label：显示标签value：option值change事件： 选中值发生变化时触发 ，回调参数是目前的选中值<el-select style="width: 150px" v-model="listQuery.onoff" placeholder="状态" ...

<!--Dialog 对话框在保留当前页面状态的情况下，告知用户并承载相关操作。Dialog 弹出一个对话框，适合需要定制性更大的场景。需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还...

到的

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。1、基础表格当el-table元素中注入data对象数组后（多行数据存成一维数组格式，但每一行数据存成对象，每一行的数据格式键名要相同，不能处理成多维数组的格式，prop属性可以动态绑定），在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的...

方法使用前需了解：来自”和“小编的小提示：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在<el-form-item>上面，写在里面的input上或者其他任何地方都不行（el-form-item p...