el-table树形结构踩坑汇总

1.element的:tree-props=“{ children: ‘children‘,hasChildren: ‘hasChildren‘ }“里面的坑

数据里面必须用children用其他字段都不行，children: 'children'这里改了没用

2.如果树节点想要默认展开，default-expand-all不起作用，需要写方法实现

  // 表格树形默认展开expandAll () {var els = document.getElementsByClassName('el-table__expand-icon') //获取点击的箭头元素for (let i = 0; i < els.length; i++) {els[i].click()}},

每次获取完接口数据后调用expandAll方法刷新，但是要注意这个其实还不够，因为数据获取后直接调用页面还没更新完成，需要用$nextTick等数据更新完成后再展开节点

 this.$http({url: this.API.findTree,method: 'post',data: this.search}).then(res => {if (res.data.code === this.API.SUCCESS) {this.tableData = res.data.bodythis.$nextTick(() => {this.expandAll()})}}).catch(_ => {}).finally(res => {this.listLoading = false})

3.双层表头以及表头超出一行显示省略号，鼠标上移显示

 <el-table-columnshow-overflow-tooltip:label="item1.roleName"v-for="(item1, index) in headers"width="240":key="index"><el-table-column show-overflow-tooltip :prop="item1.id" :label="item1.userNames"><template slot="header" slot-scope="scope">
<!-- slot-scope="scope"这句必须有，没有就不会生效，虽然我也不知道为啥 --><!-- <el-popover trigger="hover" placement="top"><span>{{ item1.userNames }}</span><divslot="reference"style="width:100%;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;line-height:14px;vertical-align: middle;"><span>{{ item1.userNames }}</span></div></el-popover> --><el-tooltip effect="dark" :content="item1.userNames" placement="top"><divstyle="width:100%;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{item1.userNames}}</div></el-tooltip></template><template slot-scope="scope"><div><span v-if="scope.row[item1.id] === 'Y'" class="el-icon-check f24 green-text fw800"></span><spanv-else-if="scope.row[item1.id] === 'N'"class="el-icon-close f20 red-text fw800"></span><span v-else></span></div></template></el-table-column></el-table-column>

el-table-column里面套el-table-column可以实现多级表头

通过插槽header，设置样式结合popover弹框或者tooltip都可以实现表头超出一行省略号，鼠标上移显示

el-table树形结构踩坑汇总相关推荐

java顺丰运费接口_对接顺丰丰桥踩坑汇总（写给自己）
顺丰丰桥使用流程登录注册丰桥 https://qiao.sf-express.com/index.html 申请一条龙开发者信息按提示搞就行了,然后会有个测试月卡,如果正式环境需要申请正式月卡 ...
HTML5中Audio使用踩坑汇总
Cannot read property 'catch' of undefined 原因:在调用play()时,现代浏览器返回的是一个promise,对于执行失败的,会触发一个Unhandled Pr ...
js踩坑汇总（一）.md
JS问题整理 js的typeof返回的值 function number undefined object boolean 强制类型转换和隐式类型转换强制 parseInt parseFloat n ...
cs231n课程作业踩坑汇总
欢迎移步我的个人博客 https://blog.csdn.net/Kaiyuan_sjtu/article/details/80527131 报错:from past.builtins import ...
微信公众号视频录制开发踩坑汇总
背景微信公众号(PC)实现视频录制,技术栈 react. 1. http or https 视频录制如果是基于navigator.mediaDevices 这种方式,http协议下只能通过local ...
vue3.0 study（二）安装 element-plus踩坑汇总
一.vue3.0 安装 element-plus 用法# 完整引入# 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便. # 选择一个你喜欢的包管理器# NPM $ npm install ...
瑞吉外卖项目笔记+踩坑1——基础功能
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城目录 1 ...
【Java笔记+踩坑】SpringBoot——基础
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城目录 ...
【Java笔记+踩坑】SpringBoot基础2——运维实用
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城目录 ...

el-table树形结构踩坑汇总

el-table树形结构踩坑汇总相关推荐

最新文章

热门文章