vue:element-ui问题小记(二)

el-table 树形表格 如何让某一行默认展开

具体需求是在对表格做了增加\删除操作,对应的表格行要自动展开。element的官方文档给出了对应的设置参数,但是应用到我们的数据中并没有效果,经过多次测试、实验找到了一种解决办法,这里贴出来大家分享,如果你有更好的办法,可以私信交流~


表格展开参数

解决办法
核心是 row-key、expand-row-keys属性
特别要注意的是row-key传入的是一个Function(row),而expand-row-keys传入的是一个数组,元素的值是要展开的row的key。
但是这里即使设置了,也没有实现展开的效果,这里给大家还需要做一件事情,就是对你需要默认展开那一行的td>div中el-table__expand-icon 这个class 执行click()事件。

el-table-column使用v-if导致数据渲染错乱

编辑表格时,使用v-if控制列表的显隐,发现会有随机列位置错乱与数据错乱现象。 这是因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的,于是需要添加key来做区分!
表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了。

 <el-table-column
            v-if="operate_type==2"
            :key="Math.random()"
            prop="table"
            label="table"
          />

注:这里有个大坑,若是表格上面有输入框,表格会一直闪烁

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容