element-ui 组件库
猕猴桃-HR
前端开发工程师
展开
-
element ui el-empty 用法的使用
el-empty 的基本使用原创 2022-10-09 13:14:07 · 4861 阅读 · 0 评论 -
【Element-ui】el-slider滑块自定义样式,实时显示选中两点的数值在上方,左右显示0到100
element-ui 组件库原创 2022-10-08 12:55:45 · 3306 阅读 · 0 评论 -
el-table表格被选择过就禁用,不可在选择的方法
选择过的数据跟当前id 相同就禁用, 不允许在选择。 <el-table-column v-if="tableData.length > 0" type="selection" :selectable="(row) => {return !selectedTableData.find((v) => v.id == row.id);}" width="55" />...原创 2022-01-04 16:48:41 · 1481 阅读 · 0 评论 -
element-ui 表单el-form-item 自定义label 标签
1: <el-form-item label="姓名"> <span slot="label"> 姓名 <el-tooltip placement="top"> <div slot="content"> 第一行信息<br/> 第二行信息 </div> <i class=.原创 2021-12-31 09:11:56 · 2641 阅读 · 0 评论 -
element ui table表格计算最后一列的合计数
1: table的合计功能2: 需求:计算表格中最后一列的总和,其他数字列不进行计算。summary-method自定义的合计计算方法Function({ columns, data })给table添加:summary-method="getSummaries"1: <el-table ref="table" size="small" :data="shopList" fit show-summary :summary-method="getSummaries">...原创 2021-12-17 16:04:48 · 1355 阅读 · 0 评论 -
element中el-table(合计)计算指定列
1.需求:我只需要前面三列的合计,最后一列不需要看到element-ui里面的show-summary方法,以及自定义的:summary-method,觉得很合适<el-table :data="tableData" class="table" fit size="medium" show-summary :summary-method="getSummaries"> <el-table-column prop="id" label=.原创 2021-12-17 15:49:14 · 3902 阅读 · 0 评论 -
Vue 方法样式修改 Vue中的scoped及穿透方法(修改第三方组件局部的样式)...
何为scoped?在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。scoped的实现原理:Vue 中的scoped 属性的效果主要是通过PostCSS 转义实现的, 转移之前的代码如下:scoped的实现原理: PostCS.原创 2021-12-17 11:55:20 · 1409 阅读 · 0 评论 -
element-ui el-upload 上传文件类型限制
1: <el-upload class="c-upload" ref="upload" :action="actions" :headers="myHeaders" :data="myData" :limit='limit' accept=".xls,.xlsx" :on-exceed="onExceed" :on-change="onChange" :on-success="onSuccess" :on-error="onError" :file-.原创 2021-12-15 13:29:21 · 2890 阅读 · 0 评论 -
el-button 设置为浮动的元素以后点击事件无效
1: 使用element-ui 组件库的时候, 使用点击事件无效: 点击按钮无效, 可以在@click是事件后边加上 .native 事件修饰符还需要添加一个属性, position: relative: 设置为相对定位。原创 2021-10-25 17:29:27 · 2133 阅读 · 0 评论 -
通过具名slot (插槽) 来显示Dialog 的标题
这是一个dialog , 通常我们的写法是这样的:<el-dialog center width="30%" title: "提示" :visible.sync="centerDialogVisible"> </el-dialog>所以这种情况我们没法写副标题, 还需要加一些样式来控制主副标题。 可以通过slot 来解决。<el-dialog align="left" // 标题靠左 :visible.sync="v.原创 2021-10-20 11:21:49 · 902 阅读 · 0 评论 -
elementUI el-table 组件多选 设置默认勾选
1: toggleRowSeeletion() : 设置默认多选模式<el-table ref="multipleTableClinicRoom" :data="tableData" stripe border v-loading="tableLoading" highlight-current-row @row-click="handleCurrentChange" :cell-class-name="getCellInd.原创 2021-10-19 20:10:58 · 1285 阅读 · 0 评论 -
input 输入框里边加上小图标的问题
<el-autocomplete popper-class="separator-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="搜索" @select="search" class="table-head-search" > <img src="../../images/new-search.png" slot="prepend"></el.原创 2021-10-08 10:04:12 · 802 阅读 · 0 评论 -
el-table 带状态的表格
1: 可以将表格内容highlight 显示, 方便区分 [成功, 信息, 警告, 危险] 等内容。 可以通过指定Table 组件的row-class-name 属性来为 Table 中某一行添加class 属性, 表明该行处于某种状态。2: <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowCl.原创 2021-09-06 18:25:45 · 1366 阅读 · 0 评论 -
select 下拉框的组合
1: select 下拉框的组合效果 <el-select style="width: 224px" placehodleer="请选择店铺" v-modle="pageInfoList.storeName" clearable> <el-option-group v-for="group in multipleSelectOption" :key="group.id" :label="group.market" > <.原创 2021-09-06 13:47:21 · 198 阅读 · 0 评论 -
el-date-picker 日期选择器的使用
1: <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker>---------------------------------------data() { return { disabledDate(time) { r.原创 2021-08-13 15:37:33 · 861 阅读 · 0 评论 -
表单的预校验功能&& git 常用命令
1: 监听对话框的关闭事件 addDialogClosed () { this.$refs.addFormRef.resetFields(); // 对表单的重置功能 }2: 点击按钮, 添加新的用户addUser() { this.$ref.addFormRef.vaildate(vaild => { if(!vaild) return; // 如果为true, 则可以发起网络请求 })}---------------------------.原创 2021-08-02 17:29:07 · 180 阅读 · 0 评论 -
通过axios 拦截器添加Token 验证
1: 通过axios 请求拦截器添加token 验证, 保证拥有获取数据的权限。 axios 的优化: Vue.prototype.$axios = axios; // axios 请求拦截 axios.interceptors.request.use( function(config) { // 在发送请求之前做些什么 // 在请求拦截器中 统一加上token 值 config.headers.token = sessiosStorage..原创 2021-08-02 16:03:16 · 582 阅读 · 0 评论 -
工作日历创建
1: 工作日历创建<!--日历明细弹框--><el-dialog :title="$t('field.monthschedule.shopcalendar')" width="60%" v-dialogDrag :visible.sync="calendarVisible" @close="calendarVisible = false" :close-on-click-modal="false" class="calendar-dialog" ..原创 2021-04-15 14:37:06 · 109 阅读 · 0 评论 -
时间日期显示格式
1: 时间日期显示格式:<el-form-item :label="日期范围"> <el-date-picker v-model="timeRange" type= "daterange" range-separator="至" start-placeholder = "开始时间" end - placehodler = "结束时间" format = "yyyy 年 MM 月 dd 日" .原创 2021-04-14 15:48:02 · 960 阅读 · 0 评论 -
input 用法
1: input 用法: input 输入框: 数值用法 <el-input v-model.number="dataForm.partQty" auto-complete="off" :placeholder="$t('aaaaaaa')" oninput="value=value.replace(/^\.+|[^\d]/g,'')" type="number" clearable ></el-input>...原创 2021-04-14 15:03:51 · 457 阅读 · 0 评论 -
table 表格 formatter 格式化文档
1: table 表格 formatter 格式化文档:formatter:this.showCross// 定义事件方式2:showCross(row) { // 可以拿到当前行的数据 return row.isCross == false ? this.$t('否') : this.$t('是');}// 进行数据格式转化...原创 2021-04-09 11:14:22 · 777 阅读 · 0 评论 -
el-table 自定义索引列
1: 自定义type = index 列的行号: 通过给 type = index 的列传入 index 属性, 可以自定义索引。 该属性传入数字时, 将作为索引的起始值。 也可以传入一个方法, 它提供一个当前的行号(从 0 开始)作为参数, 返回值将作为索引展示。 <el-table-column type="index" :index="indexMethod"> </el-table-column>2: 自定义索引列: meth...原创 2021-03-30 17:07:35 · 3569 阅读 · 1 评论 -
Element-ui
1: element-ui: 组件库: 使用方法: el-Tooltip: 文字提示: 使用content 属性来决定hover 时提示信息, 由placemant 属性决定展示效果: placement: 属性值为: 方向对其位置: 四个方向: top, left, right, bottom. 三种对齐方式: start (首对齐), end: (尾对齐) , 默认为空。 如: plancement= “left-end”, 则提示信息出出现在目标元素的左侧,且提示信息的...原创 2021-03-22 09:31:44 · 86 阅读 · 0 评论 -
element-ui 组件库日期选择器
1: element-ui 组件库日期选择器改造:<el-form-item :label="$t('11111111')"> <el-date-picker v-model.trim="dataQueryForm[1].text" type="month" :placeholder="$t('111111111')" clearable :size="size" format="yyyy 年 MM 月" .原创 2021-03-17 15:35:12 · 238 阅读 · 0 评论 -
Element-ui 组件库
1:Element-ui 组件库使用方法: Dialog: 对话框属性: 是否显示 Dialog, 支持 .sync 修饰符 类型为boolean 类型原创 2021-03-17 15:21:48 · 205 阅读 · 0 评论 -
element-ui 组件库
1: Select: 下拉框 lable: 属性与 {{}} 插值表达式写法一直<el-form-item :label="$t('aaaaaaaa')"> <el-select v-model.trim="dataQueryForm[3].text" :placeholder="$t('aaaaaaaaa')" clearable> <el-option v-for="item i...原创 2021-03-17 13:04:25 · 365 阅读 · 0 评论 -
ivew 组件库select下拉框
1: ivew 组件库下拉框: <Select filterable class="search-col" v-model="searchModel.quanlityClassCode"> <Option v-for="(item, index) in defectList" :value="`${item.code}`" :key="`List_${index}_${item.code}`" >{{ item.code }} -.原创 2021-03-05 10:19:27 · 232 阅读 · 1 评论 -
input 输入框的基础用法
1:基础用法:<el-input v-model="input" placeholder="请输入内容"></el-input>2: 禁用用法:<el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>3:可清空用法: (使用clearable属性即可得到一个可清空的输入框) 使用 clearable 属性<el-input pl...原创 2021-03-04 14:14:43 · 1231 阅读 · 1 评论 -
form 表单数字类型
1:form 数字类型校验:数字类型校验需要在 v-modle 处加上 .number 的修饰符。 这里是Vue 自身提供用于绑定值转化为number 类型的修饰符。<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age" :...原创 2021-03-04 13:49:41 · 1243 阅读 · 1 评论 -
form 校验规则
1: form 表单校验规则 Form 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> ...原创 2021-03-04 13:24:37 · 1194 阅读 · 1 评论 -
elemnent-ui table-tree 组件
1: table-tree 组件:此组件主要是在element-ui的el-tree的基础上,实现table-tree的组件封装,此组件主要是提供封装的思路。<div class="content-tab"> <div class="tree-super"> <div style="border: 1px solid #D4D9E1;"> <ul class="titie"> <li>.原创 2021-02-24 13:39:02 · 683 阅读 · 0 评论