element-ui
肖肖肖丽珠
学习学习。写博客是为了积累和总结。如果写的有错欢迎大家指正点拨。努力成为技术小牛~~加油
展开
-
element-ui el-table 第3列的第一行第二行进行合并
<el-table :data="otaconfigList" :span-method="mergeTable" border style="width: 100%" class="otaconfigTable"> <el-table-column prop="op" label="字段" width="150"> </el-table-column> <el-table-column ...原创 2022-04-13 11:32:52 · 1616 阅读 · 0 评论 -
elment-ui 的table自定义表头的内容
<el-table-column :label="$t('assignmentTable.Enabled')" min-width="100px" :render-header="renderHeader"></el-table-column>//渲染表头已启用 renderHeader(h,{column,$index}){ return h('span', [ h('span', column.lab...原创 2022-04-06 18:25:37 · 1160 阅读 · 0 评论 -
vue-element-admin面包屑改写成多级
component-Breadcrumb面包屑组件修改getBreadcrumb() 加了绿色的部分getBreadcrumb() { let matched = this.$route.matched.filter(item => item.meta && item.meta.title) const first = matched[0] if (!this.isDashboard(first)) {...原创 2022-03-29 11:00:52 · 2034 阅读 · 0 评论 -
elment-ui 表格鼠标滑过显示不同的样式
<style scoped> /deep/ tbody tr:hover>td,/deep/ tbody tr.hover-row>td { color:#66b1ff }</style>原创 2022-03-25 16:50:29 · 1682 阅读 · 0 评论 -
element-ui 关闭现在弹窗的提示内容去显示新的提示
如果不停的点一个错误的提示。而你写了duration:2000.2s之后隐藏,他会出现这样的bug。但是我们也不能把这个延迟写成0.否则一闪而过。也没看清楚提示的内容。所以我们想在下一次提示之前关闭之前的提示可以通过document.getElementsByClassName('el-message').length === 0//没有弹窗关闭所有的弹窗提示this.$message.closeAll();//关闭所有的弹窗...原创 2022-03-22 11:55:00 · 2253 阅读 · 0 评论 -
element-ui的confirm里面可一写html
只需要把这个属性定义一下就可以啦。this.$confirm('<p>lalllalaa</p>', '标题', { type: 'warning', dangerouslyUseHTMLString:true, }).then(() => {.....}).catch(() => {});...原创 2022-01-27 18:56:10 · 3750 阅读 · 0 评论 -
elementui循环时v-for 里面的el-switch绑定的值没有办法点击
添加一个点击事件,使用this.$set改变数组的内容。<div v-for="(row,index) in list"> <el-switch v-model="row.enabled" :active-value="true" :inactive-value="false" active-color="#3F96F3" ...原创 2022-01-25 11:51:52 · 1720 阅读 · 0 评论 -
element-ui设置选中的table的行的多选框toggleRowSelection不起作用
1.最外面添加this.$nextTick(()=>{})2.toggleRowSelection里面要循环选中的那个数组。this.$nextTick(()=>{ this.multipleSelection.forEach(row => { //tableData所有表格的内容数组。multipleSelection要选中的内容数组 this.$refs.multipleTable.toggleRowSelection(this.tableData...原创 2021-10-21 18:25:24 · 942 阅读 · 1 评论 -
element-ui单选框按钮的样式改成勾勾
默认的单选框的样式是这样的我想换成图标是勾勾的。// 全局单选框图标换成勾勾 #app /deep/ .el-radio__input.is-checked .el-radio__inner::after { content: ''; width:8px; height: 3px; border: 2px solid white; border-top: transparent; b...原创 2021-09-25 14:24:10 · 3385 阅读 · 1 评论 -
element-ui cascader 级联选择器 v-model存最后一级id显示的完整的路径
<el-cascader ref="cascaderAddr" v-model="addForm.eid" :options="options" :props="props" separator="-" placeholder="请选择关联的词条" clearable></el-cascader>...原创 2021-09-24 14:34:30 · 3228 阅读 · 1 评论 -
element-ui的下拉框有值却一直无法选中的问题
下拉框时循环接口来的。数据层嵌套的太多了,所以显示的地方没有及时更新。我们写个强制更新就行了<template> <el-select v-model="value" filterable placeholder="请选择" @change="update()"> <el-option v-for="item in options" :key="item.value" :label="item.label"...原创 2021-09-09 14:50:11 · 358 阅读 · 0 评论 -
element-ui显示和隐藏某个tab标签
<el-tabs v-model="activeName" ref="tabs"> <el-tab-pane label="基本信息1" name="first" > 基本信息</el-tab-pane> <el-tab-pane label="基本信息2" name="second" > 基本信息</el-tab-pane> <el...原创 2021-08-17 12:32:01 · 4356 阅读 · 1 评论 -
element-ui日期时间选择器限制时间的可选择的范围,只能选五分钟之内的时间
只能选择今天的当前时间的五分钟之内。首先控制日期只能选择今天disabledDate:time=>{returntime.getTime()>newDate()||time.getTime()<newDate()-20*3600*1000},然后控制时间。使用的selectableRange="07:00:00-12:23:00"这样的格式就是只能选择这个时间段这个时间段写了一个方法获取。<...原创 2020-09-23 15:35:43 · 5800 阅读 · 0 评论 -
vue属性使用和不使用冒号的区别
vue中冒号:是v-bind的缩写。一直最常见的做法是代表绑定一个变量。但是我今天用到复选框是时候缺出现选不中的情况<el-checkboxv-model="checked">备选项</el-checkbox> checked:1但是没有选中然后我想可能是没有写true-label,于是这样写。因为true-label接收一个数值或者字符串。我的默认值是数值。<el-checkboxv-model="checked" true-...原创 2020-09-23 10:47:02 · 2153 阅读 · 0 评论 -
element-ui 日期选择器如何禁用几个时间段
这个图片效果,禁用好几个时间段。这个一个童鞋私信问我的一个问题。当时第一下觉得以前都是禁用一个时间段。。那么现在禁用多个就把条件判断写好啊。el-date-pickerv-model="value2"type="date"placeholder="选择日期时间"align="right"@focus="changeEnd":picker-options="pickerOptions">...原创 2020-09-10 10:22:36 · 4475 阅读 · 1 评论 -
element-ui el-autocomplete怎么使用以及怎么控制只能输入数字
el-autocomplete实现的效果是输入内容下面给提示.然后选择一条就填写到了相应的位置<el-autocompleteclass="w300"popper-class="searchUser" v-model="addSForm.mobile":fetch-suggestions="querySearch"v-numberonlysplaceholder="请输入内容"@select="usernameSelect"clearable...原创 2020-08-07 10:08:38 · 5602 阅读 · 0 评论 -
给element表单添加必填*星号的方法
1,利用rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"&g....原创 2020-07-23 11:12:35 · 32872 阅读 · 5 评论 -
element-ui的prompt如何在输入内容以后点击了确定事关闭弹窗
cancelAudit(){var_this=this;this.$prompt("撤销审核的原因:","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputValidator:(value)=>{ if(!value){//对输入内容校验 return'撤销...原创 2020-07-22 11:46:06 · 4867 阅读 · 0 评论 -
vue+elementui 项目中输入手机号,要求必须是数字限制最长11位 。type=“number“ 中maxlength失效
这样的需求是经常用到的。但是我们在用的时候却发现了一些问题:<el-inputv-model="mobile" placeholder="手机号" type="number" maxlength="11"></el-input>只能输入数字:type="number"最长11位 : maxlength="11"如果写type="number" maxlength="11"。的确只能输入数字但是maxlength="11"的长度限制却失效了。如果不写...原创 2020-07-01 16:55:15 · 8265 阅读 · 4 评论 -
vue+elementui的table合并行
一个班级下面可以有多个试卷。这时候我们要根据班级的id来确定合并的行数。班级id一样的要合并。 tableData: [ { classname: '2018年暑假班一年级语文小班兴趣', clsid: '123', title: '2020/06/18 20:21:12 测试 (4)题', }, { classname: '2018年暑假班一年级语文小班兴趣', clsid: '...原创 2020-06-23 16:59:15 · 1787 阅读 · 1 评论 -
element-ui的表格。表头和表格数据都是接口动态给的。多级表头。如何写呢?
就像上面这样的表格数据。他的表头是两级的。表头和数据都是接口给我的。上面是接口传来的数据。titledata是表头的数据。children如果长度大于0.children就是他的2级表头。tablebase是表格内容。表头的value值对应表格数据的键值。如果tablebase作为表格一级表头的表格。键是表头,那么我们即使不知道长度也可以通过循环来写的。参考这篇文章https://blog.csdn.net/qq_33769914/article/details/106547680。但是..原创 2020-06-11 10:56:52 · 1757 阅读 · 2 评论 -
vue+element-ui实现多选框绑定数组对象。为什么不能回显
本来的逻辑是点全选获取全部单选的绑定值的数组。就可以让下面所有的选中。但是如果下面单选绑定的不是一个值。而是一个对象的话。即使点击全选获取所有单选对象组成的数组也不能回显。直接按照官网的例子修改一下.让他绑定的值是对象。发现你写了checkedCities选中的对象内容,但是并没有回显<template><div> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change..原创 2020-06-10 18:12:29 · 3832 阅读 · 2 评论 -
vue input值既要绑定一个值又要显示接口给的值。
如果input是一个的话我们之间可以命名<input type="text" v-model="item" readonly="readonly"/>然后data定义item。初始化的时候让他等于接口给的那个值就可以啦。但是如果input用在循环里面。<spanv-for="(item1,key)in children":key="key" > <inputclass="el-input__inner" type="num...原创 2020-06-04 17:43:24 · 2054 阅读 · 0 评论 -
element-ui动态生成表格。表头的名字不一样
官网的是这样的。接口数据是已知的:日期,姓名,地址所以可以直接写label。prop的写死如果表头数据是动态的不一定的。我们应该怎么写呢?下面是接口给的表格的数据可以观察看出来我们如果使用循环。就是循环el-table-column<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date"...原创 2020-06-04 15:41:15 · 1864 阅读 · 0 评论 -
element-ui 怎么实现分页全选当前页。切换页码的时候保存选择状态
我的全选当前页。只有一个。当页码切换的时候。页面的内容会根据接口显示刷新成新的数据。但是全选当前页状态没有变化全选当前页按钮有三个状态1.勾选全部 2.勾选了部分内容 3.没有选任何内容 所以我们可以根据当前页面选中的内容数量a和接口获取的当前页面所有的内容数量b做比较。如果数量一样a=b。那么就是勾选全部。如果a<b ,勾选了部分如果a=0.没有勾选。下面是官网的例子。我们来说说要对他做哪些改进:<template> &...原创 2020-05-19 15:50:06 · 3235 阅读 · 0 评论 -
input获取焦点显示内容,失去焦点隐藏内容。点击内容获取点击值显示内容
鼠标移入电话号码。获取焦点,显示下面的电话号码的列表。失去焦点。隐藏下面的电话号码列表。移入点击一个电话号码。得到电话号码列表隐藏。此时会出现一个问题:当我点击电话号码列表的时候,input也是失去焦点。他没有获取点击的内容就执行了失去焦点的隐藏操作。我这里就写了在失去焦点的时候写了一个延时setTimeout。如果是点击电话列表的,就先去执行那个函数事件了//鼠...原创 2019-04-28 14:31:23 · 2169 阅读 · 1 评论 -
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框这时我们发现这个解析的框被外面一个遮罩层挡住了。我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。首先查看官网的element-ui的el-dialog的一些属性首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false"...原创 2019-04-01 11:51:57 · 19405 阅读 · 7 评论 -
修改element-ui tree树结构前面得小三角。
可以看到有下级没展开是。有下级展开了是没有下级了得前面什么符号也没有。我们只需要替换那两个就可以啦。有下级用没展开+。展开了用-。我们只需要覆盖原来得样式,.tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg)...原创 2019-03-11 15:59:07 · 28663 阅读 · 32 评论 -
element-ui下拉多选报错Error in event handler for "handleOptionClick": "TypeError: value.push is not a func
<el-form-item label="所在校区" prop="zoneid"> <template> <el-select v-model="addForm.zoneid" multiple placeholder="请选择" @visible-change=&quo原创 2018-11-15 09:24:14 · 28360 阅读 · 1 评论 -
element-ui报错 custom validator check failed for prop "percentage"
<el-progress :percentage="50" status="exception"></el-progress>原因是因为percentage的值是数字0-100。当值大于100的时候就会报上面的错误。原创 2019-05-05 17:29:46 · 13549 阅读 · 4 评论 -
ElementUI】日期选择器年份只能选择今年至今年以后的
<el-date-picker type="year" value-format="yyyy" :picker-options="pickerOptions"</el-date-picker>pickerOptions:{ disabledDate(time) { return time.g...原创 2019-05-08 16:37:49 · 14934 阅读 · 1 评论 -
element-ui tree树默认选中第一个并加上选中的样式。为什么样式加的没效果?实际上打印时已经选中了
样式效果如上 <el-tree :data="treedata" :props="defaultProps" :expand-on-click-node="false" :current-node-key="currentNodekey" ...原创 2019-05-22 16:18:40 · 10357 阅读 · 4 评论 -
element-ui 上传组件进度条解决方法
let form = new FormData(); //uploader为之前提到的实例form.append("file", uploader.file);axios .post(url,form, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: pr...原创 2020-08-21 18:08:31 · 16806 阅读 · 6 评论 -
MathJax动态显示数学公式的时候不显示渲染过程
我们在接口给的数据渲染公式以后。他有个渲染的过程。我们能看到他一点点的加载的过程。怎么做让这个过程不显示。等加载完了再显示呢?//转换页面的图片数学公式 var mathdivs =$("#testListBox").find(".mathDiv"); for(var i = 0; i < mathdivs...原创 2019-07-04 13:58:35 · 3619 阅读 · 2 评论 -
element-ui select下拉框 远程搜索回填选项的时候为什么不能点击
在编辑的时候可能需要回填你开始利用远程搜索选好的那些选项。<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"><el-form-item label="主讲老师" prop="mainteachername" style="width:370px...原创 2019-07-18 09:27:10 · 5116 阅读 · 6 评论 -
使用element-ui的图标。但是不用class的方式而是伪类content里来定义
首先我们想使用这个图标<i class="el-icon-check"></i><ul> <li class="icon">导入</li><li>讲授</li></ul>但是我希望在一个选中的前面就有个对号。但是不想原创 2019-03-14 14:40:22 · 5526 阅读 · 4 评论 -
element-ui 表格合并 span-method
/** * 表格合并 * @param {*} param0 * row 表格每一行的数据 * column 表格每一列的数据 * rowIndex 表格的行索引,不包括表头,从0开始 * columnIndex 表格的列索引,从0开始 */ arraySpanMethod ({ row, column, rowInd...原创 2019-02-21 16:37:24 · 1747 阅读 · 0 评论 -
element-ui 弹窗的this.$confirm框报错Uncaught (in promise) cancel
这是因为你点击了取消或者是关闭弹窗,但是你没有写catch。正确的写法是this.$confirm('确定清空试题篮所有试题?', '提示', { type: 'warning' }).then(() => { localStorage.setItem('chosedRe...原创 2018-09-11 16:26:55 · 25851 阅读 · 4 评论 -
Property or method "toJSON" is not defined on the instance but referenced during render. Make sure t
Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by ini...原创 2018-08-21 09:54:56 · 53641 阅读 · 3 评论 -
由element-ui从1到2升级出现的问题
1.el-picker日期格式的问题 <el-date-picker type="year" v-model="editForm.termyear" @change="editChangeYear" value-format="yyyy"></el-date-picker>以前写的是format。。现在改成这个value-format。change事件原创 2018-08-20 18:45:59 · 1136 阅读 · 0 评论