素材牛VIP会员
element ui 的talbe中属性type=“extpand”的动态控制
 青***1  分类:JavaScript  人气:1068  回帖:2  发布于6年前 收藏

element ui 的talbe中有一个type=“extpand”,我想控制它,让某些行不用展开。

 标签:html5javascript

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv2 入门
zz***60 技术总监 6年前#1

可以试试 toggleRowExpansion这个方法element-ui table

Lv1 新人
km***04 JS工程师 6年前#2

这个问题刚遇到过。
官方没有提供任何对expand定制化的api和属性,要么所有行都能扩展,并且扩展列的图标、文字都不能自定义,要么就没有扩展。
翻了源码,发现是写死的,完全无后门可走。。。提了issue,官方回复“Sorry, we have no plan to support this.”。。。只能自己想办法hack了。

他扩展列的事件是绑在".el-table__expand-icon"这个div上的,思路倒是简单,就是想办法把对应行的这个div的display设成none。关键是怎么找到要隐藏的这些div。

tableData数组的顺序和表格最终渲染出来的行顺序是完全一致的,并且关键一点,与table中的".el-table__expand-icon"元素的顺序也完全一致。所以,只要等table渲染完成以后,在nextTick里查出所有满足条件的".el-table__expand-icon"元素隐藏掉就完事儿了。

比如一条数据的状态是1就扩展,否则就不允许扩展。在给tableData赋值以后,执行:

this.$nextTick(function(){
    let expandIcon = this.$refs.table.$el.querySelectorAll(".el-table__expand-icon");
            this.tableData.forEach((rowData, index) => {
                if (rowData.state !== "1") {
                    expandIcon[index].setAttribute("style", "display:none");
                } else {
                    expandIcon[index].setAttribute("style", "display:block");
                }
            });
})

另外,如果不想用官方的展开列的那个箭头表示展开收起,替换成其他icon或者文字,也需要hack。直接从css入手就行:
屏蔽掉.el-table__expand-icon--expanded的rotate;替换掉.el-table__expand-icon>.el-icon的position,修改.el-icon-arrow-right:before的content

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取