ElementUI
汉武大帝·
我是攻城狮
展开
-
vue elementUI输入框, 限制输入类型
vue elementUI输入框, 限制输入类型原创 2023-03-08 13:47:50 · 394 阅读 · 0 评论 -
ElementUI中的 Cascader 级联选择器 卡顿问题
当数据多的时候可能出现卡顿的情况,在点击小叉号进行删除已经选择的时候,也可能会出现卡顿的情况,在当重置清空数据的时候,使用一下方式或许会避免 页面卡顿, let obj = {} obj.stopPropagation = () => {} try{ this.$refs.cascader.clearValue(obj) }catch(err){ this.$refs.cascader.handleClear(obj)原创 2021-12-24 13:48:19 · 4997 阅读 · 5 评论 -
element中 通过外部按钮使表格全部选中
表格第一列:<el-table-column type="selection" width="55"> </el-table-column>this.$refs.multipleTable.toggleAllSelection();表格全部选中其他文章:Vue+element利用外部按钮实现表格(分页)全选、反选_缓月-CSDN博客...原创 2021-10-14 17:56:59 · 939 阅读 · 0 评论 -
elementUI表格数据变化后,表格自动刷新的办法
:key="Math.random()"<Table :tableConfig="tableConfig.tHead" :tableTitle="tableConfig.tableName" :tableData="tableData" :paginationShow="false" :config="tableConfig" :key="Math.random()" > .原创 2021-07-13 10:52:33 · 13641 阅读 · 5 评论 -
elementUI中的el-scrollbar 组件
<div style="background:#FAFBFF;width:90%;float:right;border-radius:10px;height:90px;padding:10px;color:#A9B6CD;"> <el-scrollbar style="height:100%;"> {{student.memo}} </el-scrollbar> <.原创 2021-07-11 18:08:33 · 193 阅读 · 0 评论 -
elementUI的表头重写
renderHeader(h,{column}) { let renderLimt = this.config.renderLimt; return h("div", {}, [ // //h是creatElement定义的函数,三个参数,一是标签名,二是属性设置,三是值 h('span', {}, column.label), // 第一个元素:文字 h( "el-popover", // 第二个元素的弹出框,鼠标悬浮到icon.原创 2021-06-08 15:24:08 · 708 阅读 · 0 评论 -
elementUI中popconfirm组件的确认和删除事件
先看源码:所以在el-popconfirm组件上写事件时应该这样写:原创 2021-04-07 10:18:18 · 1297 阅读 · 0 评论 -
elementUi中的级联选择器的清空操作
<el-cascader collapse-tags style="width: 100%" v-model="subjectValue" :options="subject" :props="{ multiple: isMultiple }" ref="cascader" clearable ></el-cascader>// 清空已经选中的数据方法 clear() { .原创 2021-03-04 15:17:39 · 5109 阅读 · 1 评论 -
设置elementUI中的单选按钮的文字隐藏
在el-radio 两个标签之间设置span标签就可以了<el-radio v-model='radio' label='1'><span></span></el-radio>原创 2021-01-03 09:20:36 · 1858 阅读 · 0 评论 -
elementUI中的Popconfirm 气泡确认框 对 确认按钮 绑定方法
使用el-popconfirm 和el-popover 的效果:代码如下:<el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red" placement="top" @onConfirm="confirm" @onCancel="cancel" t..原创 2020-12-01 11:00:21 · 3797 阅读 · 0 评论 -
使用elementUI中级联选择器遇到的问题TypeError: Cannot read property ‘level‘ of null
在用elementUI中的Cascader 级联选择器组件时,遇到的bug;TypeError: Cannot read property 'level' of null ;先说我如何操作时出现的该bug : 有一个重置的按钮,可以清空筛选条件,包括年级条件都想清空,点击重置按钮的时候,我把该组件的v-model绑定的值设置成了空数组,就报这个错了;我使用Cascader 级联选择器组件并加载数据后的样子如下所示:该组件在项目中多处使用,所以我又封装了一次,封成了一个组件,其他文件...原创 2020-10-27 13:18:13 · 1836 阅读 · 0 评论 -
elementUI中table表格列实现拖拽
1、首先,需要执行npm install sortablejs --save-dev安装sortable.js2、在页面内引入<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) i...原创 2020-10-19 15:47:53 · 1739 阅读 · 0 评论 -
设置elementUI中的输入框只能输入字母
<el-input class="inline-input" v-model="state" prefix-icon="el-icon-search" @keyup.native="state=state.replace(/[^a-zA-Z]/g,'')" placeholder="必须输入两个以上字符才能检索" ></el-input>...原创 2020-09-25 09:34:13 · 5768 阅读 · 1 评论 -
重写elementUI中的message提示框,解决提示框同时显示多个的问题
第一步:先写一个js文件: import { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if(messageInstance) { messageInstance.close() } messageInstance = Message(options)};['error','success','inf原创 2020-09-18 14:34:26 · 1418 阅读 · 0 评论 -
修改elementUI中分页器的背景色
elementUI中分页器的设置background时的背景色默认是这样的:然后,我想改成当前选中项是绿色的,其他项是白色的,修改样式如下:::v-deep { .el-pagination.is-background .el-pager li:not(.disabled) { background-color: #fff; // 进行修改未选中背景和字体 // color: #fff; } .el-pagination.is-background .e原创 2020-09-05 13:53:29 · 6563 阅读 · 7 评论 -
html文件中使用 vue.js,以及使用elementUI
html 文件中使用vue,需要先引入vue.js,可以使用在线地址 <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script s...原创 2019-11-25 23:01:27 · 9579 阅读 · 4 评论 -
解决文字和elementUI中的进度条progress组件不能在同一行的问题
我们使用span标签包裹一段文字,想要和elementUI中的progress组件显示在同一行,效果如下:span是一个行元素,progress是一个块元素,起初我是使用弹性盒布局,display:flex; 想让他们显示在一行,但是使用弹性盒布局后,发现progress没有显示效果了。后来发现,progress组件有一个类选择器, .el-progress (注意前面有一个点)...原创 2019-11-24 17:32:45 · 6942 阅读 · 7 评论 -
vue中使用element UI中的组件 回到顶部
开发框架是vue+webpack+element-ui,需要一个回到顶部的通用组件。HTML:这里使用了一个进入动画<template> <transition name="el-fade-in"> <div class="page-up" @click="scrollToTop" v-show="toTopShow"> <...原创 2019-07-20 22:27:52 · 4752 阅读 · 0 评论