element-ui
JustDI-CM
对于可控的事情要保持谨慎,对于不可控的事情,要保持乐观,人只能做自己能力范围内的事情,你要接受这个现实,并且以乐观的心,去应对这一切
展开
-
element UI-表格数据转换/格式化
业务老师想要将表格中的比例按照百分比显示,还是带 % 的这种,但是后端只是返回了一个 0-100 的数值,就需要前端自己做转换。类似的还有0与1 转换为 男与女根据当前值返回不同的结果等。可以使用 Table-column Attributes 的 formatter代码为<af-table-column prop="XX" label="XX比例" :formatter="XXFormat" align="center"></af-table-column&原创 2022-04-08 16:41:45 · 2331 阅读 · 0 评论 -
element UI-表格数据上下移动功能
1.在<el-table>中增加一列 <el-table-column label="操作" > <template slot-scope="scope"> <el-button size="mini" type='text' :disabled="scope.$index == 0" @click.stop="sortUp(scope.$index, scope.row)">向上↑ </原创 2021-03-23 17:44:32 · 1651 阅读 · 0 评论 -
element UI-日期选择器(el-date-picker)-起止日期相差30天
1.需求:结束日期选择范围:开始日期-开始日期+30天2.实现:使用el-date-picker组件的picker-options属性,及picker-options中的disabledDate方法代码(style也在,可忽略):<template> <div class="medicalRecord"> <h3 class="...原创 2020-04-09 12:44:31 · 2654 阅读 · 0 评论 -
element UI-远程搜索(el-select)
1.需求表单项需具有搜索功能,并以下拉选的形式展现2.实现<template> <div class="medicalRecord"> <div class="main-content" v-if="!taskDetail"> <div class="content-top"> <el-fo...原创 2019-12-31 15:48:18 · 6842 阅读 · 1 评论 -
element UI-远程搜索(el-autocomplete)
1.需求表单项(系统名称)需具有搜索功能2.实现<template> <div class="publicBox"> <div> <div class="main-content"> <div class="content-top"> <...原创 2019-11-22 15:51:49 · 1304 阅读 · 1 评论 -
element UI-级联选择器(el-cascader)
1.需求:form中营业单位需要展示一级单位及二级单位。2.实现:1)el-form中添加el-cascader<el-cascader style="width: 140px" :change-on-select="true" :props="defaultParams" :options="options" v-model="selectedOption...原创 2019-07-25 19:48:33 · 8367 阅读 · 0 评论 -
element UI-table表格列宽自适应
1.element UI关于表格宽度的可以使用width和show-overflow-tooltip(超出部分悬浮显示)以及列宽自适应的fit,但是这个属性不好使,也不知道为什么2.查了一些资料,发现有用width的有自己写的(本人小白看不懂),无意中发现一个利用af-table-column的,亲测有效,原文链接:element-ui table表格列宽自动适应具体步...原创 2019-07-08 11:30:52 · 45723 阅读 · 25 评论 -
element UI-文字提示(el-tooltip)
1.需求:表格中某些单元格显示一个值,当鼠标hover时显示另一个值。1)获取数据时,处理表格数据2)在单元格中添加el-tooltip原创 2019-05-13 15:52:58 · 41447 阅读 · 0 评论 -
element UI-时间选择器(el-date-picker)
1.实现只选择年份<el-form-item label="查询年份:" label-width="82px"> <el-date-picker style="width: 140px" v-model="formResult.year" type="year" ...原创 2019-05-09 18:26:01 · 9458 阅读 · 0 评论 -
element UI-上传文件(el-upload)
1.由于原生js实现的上传功能有些缺陷,暂时没有能力解决,所以尝试使用el-upload,直接上代码<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"(不用管) accept=".xls,.xlsx"(文件格式,逗号分隔) ...原创 2019-04-24 15:09:35 · 9913 阅读 · 3 评论 -
element UI-单选(el-radio)增加取消功能
记录调试增加el-radio的取消功能1.为单选加click事件2.在方法中进行判断,同时进行逻辑处理3. 方法很简单,注意思考1)单选控件首先记录一个下标2)点击一条记录时,先获取下标,然后与先前记录的下标比较。如果值相等,则表示是第二次点击该记录,需将下标重置为初始值(代码设置初始值100,是因为每页最多10条记录);如果值不相等,则表示第一次点击该记录,需...原创 2019-04-03 16:57:28 · 5771 阅读 · 4 评论 -
element UI-远程搜索(el-autocomplete)修改下拉框的样式
记录实现改变下拉框的功能1.默认样式el-autocomplete下拉列表的宽度默认与输入框的一样。当远程搜索返回的字段过多时,部分字体会被掩盖。查看官方文档,发现popper-classpopper-class Autocomplete 下拉列表的类名 2.添加popper-class3.确定元素调试中发现,打包后的下拉列表是放在一个div中4.编写样式...原创 2019-04-10 11:09:04 · 13939 阅读 · 3 评论