elementui
喝咖啡还是泡茶
这个作者很懒,什么都没留下…
展开
-
el-table toggleRowSelection被动触发select/selection-change事件的解决方案
el-table toggleRowSelection被动触发select/selection-change事件的解决方案场景:接口返回的数据需要列表默认选中,需要调用toggleRowSelection方法,但由于非当前页数据不在数据项内,toggleRowSelection默认触发select事件导致多选数组非当前页数据被干掉解决方案:加锁rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChangehandleSel原创 2021-11-16 10:50:51 · 6523 阅读 · 4 评论 -
el-table-fixed滚动条被遮挡与数据列错位解决方案
1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 }2. 数据列错位问题pageSize改变可能会导致数据列与固定列发生错位现象解决方法,在请求数据返回后调用列表的doLayout方法 this.$nex原创 2021-10-20 11:15:58 · 2598 阅读 · 0 评论 -
css多行文本换行省略号且识别换行符
>>>.textarea { .cell { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: blue; white-space: pre-line; }}原创 2021-07-30 10:19:16 · 167 阅读 · 0 评论 -
el-table默认勾选
el-table默认勾选selected默认为true方法1: setTimeout(() => { this.list.forEach((item, index) => { if (this.hasSelectedList.indexOf(item.id) !== -1) { this.$refs.table.toggleRowSelection(this.list[index]) } })}, 0)方法2: setTimeou原创 2021-07-27 10:41:14 · 617 阅读 · 0 评论 -
js处理树结构数据常用方法
js处理树结构数据常用方法1. 递归树结构获得全部数据2. 判断树结构同级目录下有无重复数据judgeSameLabel(list) { let flag = false // 设立单独的标识用于中断递归函数 const recursion = list => { if (flag) return false for (let i = 0; i < list.length; i++) { for (let j原创 2021-07-27 10:19:55 · 772 阅读 · 0 评论 -
input输入框的disabled和type=‘password‘冲突解决方法
readonly/disabled和show-password冲突的解决方案应用场景密码框只读/禁用需要显示show-password按钮解决方案聚焦的同时失焦,实现reanonly效果,同时给input手写一个readonly的样式<el-input class="password-input" type="password" onfocus="this.blur()" show-password v-model="basicInfo.systemPassword"> <原创 2021-05-21 16:51:53 · 827 阅读 · 0 评论 -
@input校验table列重复
@input输入内容时同时校验el-table列数据是否重复// @input='colEqualCheck($event,scope.$index,scope.row)'colEqualCheck(e, index, value) { // 检查列重复 this.$set(this.dataList, index, value) this.checkRepeatCol(this.dataList) },check原创 2021-05-17 10:28:20 · 485 阅读 · 1 评论 -
jQuery实现表格的数据拖拽
jQuery实现将一个ant-table的数据拖拽复制到另一个ant-table需求ant-design-vue将一个嵌套在drawer中的table数据拖拽复制到drawer外面的table中效果拖拽中拖拽后HTML<el-button type="text" size="small" class="text-btn" @click="choseField">选择字段</el-button>// 拖拽到table<a-table class="dr原创 2021-05-14 11:11:24 · 438 阅读 · 0 评论 -
@blur检验数组重复并对重复项加后缀
@blur校验数组重复使用场景table嵌套inputinput失去焦点时判断输入的所有值是否有重复项,并对重复项增加01,02,03的后缀实现效果JS部分 data(){ return { repeatTime:new Map([]) //记录每一项的重复次数 } } repeatZhName() { // 重复字段的中文名后加_01 for原创 2021-05-12 16:12:52 · 245 阅读 · 0 评论 -
elementui实现局部loading
el-dialog局部loadingthis.dialogLoadingInstance = this.$loading({ visible: true, text: '拼命加载中', spinner: 'el-icon-loading', target: document.querySelector('.el-dialog.component-manage') }) 发起请求this.$http({ tim原创 2021-04-27 10:52:59 · 1863 阅读 · 0 评论 -
如何动态更新el-table中的数据
$set动态更新el-table中的数据解决方案this.$set(target, key, value)target: 要更改的数据源(可以是一个对象或者数组)key: 要更改的具体数据(索引)value: 新增的值<el-button type="text" @click="downloadResult(scope.row, scope.$index)"></el-button>接受数据的方法downloadResult(data,index){ data.原创 2021-04-20 19:48:28 · 3419 阅读 · 0 评论 -
@input在添加参数的情况下如何获取当前value
@input在添加参数的情况下如何获取当前value解决方案,使用#event<el-table-column prop="columnComment" label="元件字段名"> <template slot-scope="scope"> <el-input v-model="scope.row.columnComment" maxlength="32" @i原创 2021-04-20 19:37:31 · 696 阅读 · 0 评论 -
el-table实现高度自适应
el-table实现高度自适应实现代码data中定义data(){ return { tableHeight: window.innerHeight - 120, // tableHeight为el-table绑定的height screenHeight: window.innerHeight, }}mounted中监听window.onresizewindow.onresize = () => { return (() =原创 2021-04-20 19:53:24 · 399 阅读 · 0 评论 -
el-table翻页滚动条自动回弹
el-table翻页滚动条自动回弹// 翻页滚动条自动回弹this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0})原创 2021-04-20 19:58:17 · 572 阅读 · 0 评论 -
el-table触底监听事件
table触底监听,添加/删除样式// table触底监听export const bottomOutWatch = tabledom => { tabledom.addEventListener('scroll', () => { // 滚动距离 let scrollTop = tabledom.scrollTop // table的可视区域高度 let windowHeight = tabledom.clientHe原创 2021-04-20 19:55:36 · 910 阅读 · 0 评论 -
el-form嵌套el-table如何校验
el-form嵌套el-table如何校验el-form中嵌套el-table,如何对table的字段进行el-form的校验<el-table :data="currentComponent.keysList" @select="handleTableSelect" @select-all="handleTableSelect"> <el-table-column prop="componentKey" label="元件字段名">原创 2021-04-20 19:32:01 · 644 阅读 · 0 评论