element-ui table组件展开行 默认展开

在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()
            }
        },
    }
   

这样就能实现效果了，若有大佬有其它方法，欢迎赐教！