在vue项目实际开发中,经常需要用表格,element-ui为我们提供了很多类型的表格,其中,当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能,实现这样的效果
布局代码如下
<el-table-column type="expand">
<template slot-scope="props">
<div class="material_box">
<div class="material_item flex" v-for="(item,index) in props.row.material" :key="index">
<div>{{item.key}}</div>
<div>{{item.val}}</div>
</div>
</div>
</template>
</el-table-column>
用来实现展开的填充内容
js代码如下
//需要在vue的updated周期函数中调用methods里的方法 否则methods里面获取不到页面元素
updated(){
this.expandAll();
},
methods:{
//获取到页面元素 模拟点击可实现让树形表格展开
expandAll () {
var els = document.getElementsByClassName('el-table__expand-icon') //获取点击的箭头元素
console.log(els)
for (let i = 0; i < els.length; i++) {
els[i].click()
}
},
}
这样就能实现效果了,若有大佬有其它方法,欢迎赐教!