element-ui 折叠面板一次只展开一行

最新推荐文章于 2023-12-23 11:52:14 发布

she_lei_lei

最新推荐文章于 2023-12-23 11:52:14 发布

阅读量1k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/w_slch/article/details/107317101

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

			// 折叠面板每次只能展开一行
			expandSelect(row, expandedRows) {
			  var that = this
				this.percentage=0;
				this.isShVideo=false;
				this.isVideo=false;
     			 this.openscheme=row.scheme_id;
				// console.log(row);
				setTimeout(()=>{
					video=document.querySelector('.tableBox video:first-child');//获取第一个视频得播放状态
					videos=document.querySelectorAll('.tableBox video');
				},10);//延迟获取，避免dom树没有建好
			  if (expandedRows.length) {
				that.expands = []
				if (row) {
				  that.expands.push(row.scheme_id)
				  // console.log(that.expands);
				}
			  } else {
				that.expands = []
				};
			  if(this.expands.length>=1){
				  // 这里设置定时器的原因是 在展开行瞬间打开的时候 dom树可能还没有准备就绪防止出现null的情况 
			  	setTimeout(()=>{
						if(row.material_screen_type=="cross"){
							this.isShVideo=true;    
						}else{
							this.isVideo=true;
						}
                    video.addEventListener("canplay",function(){
                        setTimeout(() => {
                            that.playVideo(videos)
                        }, 1000);
                        that.play=false;
                        that.stop=true;
                    });
                    video.addEventListener("ended",function(){
                        that.stopVideo(videos);
                        that.play=true;
                        that.stop=false;
			  		})			  		
			  	},10)
			  };
                pub._InitAxios({
                    _url: pub._url,
                    ur: pub._DetailApi.ProGetMater,
                    data: {
                        "pageSize":this.page.pageSize,
                        "pageNum":this.page.currPage,
                    },
                    cbk:(res)=>{
                        // console.log(res.data.list)
                        for(var c=0;c<res.data.list.length;c++){
                            if(this.openscheme==res.data.list[c].scheme_id){
                                // console.log(res.data.list[c].scheme_voice_id)
                                this.currentMutedId=res.data.list[c].scheme_voice_id;
                                // console.log(this.currentMutedId)
                            }
                        }
                    }
                });
			},
			HTML部份：
			 <el-table v-if="tableData" :data="tableData" style="width:100%" class="tableBox" 
			  @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">