element 表格只展開一行(點擊下一行上一行關閉)


源碼:第一步

<el-table :data="tableData" border :row-class-name="tableRowClassName" @expand-change="expandChange" :expand-row-keys="expands" :row-key='getRowKeys'>
				<el-table-column type="expand" label="詳情">
					<template slot-scope="props">
						<el-form label-position="left" class="demo-table-expand" label-width="120px">
							<el-form-item label="印章圖標" v-if="props.row.isEdit">
								<viewer :images="user_img">
									<img :src="user_img[0].url" style="width: 60px;height: 60;border:1px solid #eee;border-radius: 5px;"/>
								</viewer>
							</el-form-item>

第二步

源碼:

//設置row-key只展示一行
			expands: [],//只展開一行放入當前行id
			getRowKeys(row){
				return row.id
			},

  第三步

代碼:

//表格當前行被展開或收起
		expandChange(row,expandedRows) {
			let that=this
			console.log(expandedRows);
			//只展開一行
			if (expandedRows.length) {//說明展開了
              that.expands = []
              if (row) {
                that.expands.push(row.id)//只展開當前行id
              }
            } else {//說明收起了
              that.expands = []
            }

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM