凉城玖的博客

vue3 hooks element table 合并多列单元格函数

<template> <el-select placeholder="请选择" clearable v-bind="$attrs" v-on="$listeners"> <el-option v-for="item in data" :key="item[option.key]" :label="option.isLabelFuc ? option.label(item) : item[option.label]" :

问题1： element from表单个别select 出现 一开始就校验了数据，且有数据还通不过校验。前提条件： 校验规则都设置正确，都设置prop rules等情况下出现这个问题。下面是我设置的规则校验：出现原因： 在页面数据回显时的数据赋值方式不正确导致的（不一定是这个位置赋值导致的，也有可能是其他地方赋值导致的）。解决办法： 给深层次对象赋值时，使用this.$set来赋值。拿这个courses来说原本是 this.list.courseTimes = [...autoCourseT

个人理解： 设置max-height后会多渲染一列，这一列应该是用来承载滚动条的，但是因为某种原因，滚动条没有被渲染出来，就出现了多渲染了一列，这一列里面没用任何东西。设置后效果图：样式代码：/deep/.el-table__body-wrapper { &::-webkit-scrollbar { /* 滚动条整体样式 */ width: 6px !important; /* 高宽分别对应横竖滚动条的尺寸 */ }}...

开发前提： vue elementUI在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求，直接写行内样式，有时候会发现并不会生效，直接将样式写在 style 标签中虽然样式会生效，但是不符合我们动态修改样式的需求。因此可以考虑在给 使用的ui组件 动态添加一个类名，或套上一个 div ，动态在这div上添加类名，然后再下方 style对应类名下写 要修改的 组件样式。下面贴上我的代码： <div class="item"> <el-radio

先上效果图：贴上我的代码： <span v-if="!isBin" class="chat-btn"> <el-popover v-if="!isBin" v-model="popoverVisable" // 通过改变 v-model 绑定的属性值，来控制显示隐藏 placement="right" width="181" popper-class="bind-c

如果一个img标签要根据图片变量来动态跟换src图片链接，如果src链接是远程的服务器图片地址都是没有问题的，但是如果是本地路径直接写，是不会生效的。解决办法：可以通过这种办法来解决-${require('@/assets/chat/file.png')}这里el-image标签和普通的img标签没差别什么差别。 <el-image lazy :class="[file.resourceType === 3 ? 'fileImg' :

table表格前X行恒展示不会被折叠。表头筛选按钮示意图：// data --渲染的数据（每一列每一行），请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的const header = [{prop:'if_book',name:'第一列'}，{prop:'if_sss',name:'第二列'}，]； // 定义每列列名，需要和接口获取的数据字段名对应起来才能正常展示。@sort-change // 点击对应表头触发事件，这里可以来实现点击表头筛选/排序数

效果图:公司项目，不方便展示，打了马赛克。对于一些格式的内容，就可以使用 <template solt="label"></template> 在里面定义我们需要展示的内容，// 记得需要去除 el-form-item 中的label标签// 可以通过 popper-class ，来设置类名 <el-form-item prop="courses" class="courseIdClass"> <template slot="

Element Select下拉框 选中后视图没有渲染等问题解决办法：实质就是数据层级太深，当数据改变后，视图没有重新渲染，所以通过$forceUpdate() ，来强制刷新视图，重新渲染，这个比较消耗性能。也可以在 change事件中直接通过this.$forceUpdate()是一样的效果。select 选择项 已经选择值，也拿到选择的值了，但是就是没有通过 表单校验。我之前就是这个问题导致的原因是使用了Change来触发这个校验规则，把他修改为blur修改为： 就修改下触发方式就可以了

有时候一些需求，需要上下两个Select 进行联动，比如名称/id选择框的内容需要根据 科目选中后的内容，来进行搜索，所以当 科目清空后 名称/ID 需要清空 v-model 的值。以及 el-option下拉框的选项。可以通过 <template v-if=“依赖项的选择值v-model值”></template> 来动态实时清空下拉框。然后通过Change 事件 来清空 v-model 值，如果通过Change事件手动清空v-model 值后导致 该...

想要在changge事件触发前，来触发一个事件，可以直接在 Select 选择器上面添加点击事件，但是这样点击事件是不会生效的，需要在点击事件后面加上native <el-select v-model="list.userJumpId" clearable placeholder="请选择二跳页名称/ID" style="width: 250px" :disabled="use

body .el-table th.gutter{ display: table-cell!important;} body .el-table colgroup.gutter{ display: table-cell!important;}重点：把这些样式添加到到index.html中、或者app.vue中（必须是入口文件，才能全局起作用！）例如我的项目是next框架搭建的项目，所以直接放在全局的样式文件中...

bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-

我在一次开发中遇到了这个情况：使用DateTimePicker 日期时间选择器，报错 Cannot read property ‘getHours’ of undefined，这个原因是，这个DateTimePicker 日期时间选择器 v-model 绑定的属性对应的数据类型，只能是 String() 类型的，其他数据类型均会报错，我这边是因为接口要求，改成了数组类型，所以报错了。这是个人的部分代码： <el-date-picker v-model="searchFo

在使用DatePicker日期选择器选择日期范围的时候，会用到一个属性clearable。这个属性是Boolean变量，用于决定是否显示清除按钮，默认为true。<el-date-picker v-model="value" type="daterange" :clearable="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-p

说明：很久没有开发过后台管理系统，elementui都好久没有用过了，踩了一些小坑，特意记录下：element 特点：a.组件的一般输入的值/可以选择的值，都是绑定在v-model 上面b. 在组件上面绑定值，一般来说需要 :属性名=属性值 ，这个写法c. 在组件上面设置 style=“width: 300px” 可以直接修改组件的宽度1. input 组件–输入框 ，防止用户输入空格-在v-model 后面加上 .trim： <el-form-item label="任务

ElementUI时间选择器,传入时间赋值后之后无法改变// ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search

自定义上传按钮，非自动上传，效果图action - 就是上传的接口地址accept - 是限制上传文件格式，设置后只能上传该格式文件，选取-选取按钮只是选择了文件 ，但是并没有上传 <el-upload class="upload-demo inline-block" :action="commonApi02" ref="upload02" :on-preview="handlePreview"