el-table 樹形表格 如何讓某一行默認(rèn)展開
具體需求是在對(duì)表格做了增加\刪除操作漫雷,對(duì)應(yīng)的表格行要自動(dòng)展開。element的官方文檔給出了對(duì)應(yīng)的設(shè)置參數(shù)鳍咱,但是應(yīng)用到我們的數(shù)據(jù)中并沒有效果降盹,經(jīng)過多次測(cè)試、實(shí)驗(yàn)找到了一種解決辦法谤辜,這里貼出來大家分享蓄坏,如果你有更好的辦法,可以私信交流~
解決辦法
核心是 row-key丑念、expand-row-keys屬性
特別要注意的是row-key傳入的是一個(gè)Function(row)涡戳,而expand-row-keys傳入的是一個(gè)數(shù)組,元素的值是要展開的row的key脯倚。
但是這里即使設(shè)置了渔彰,也沒有實(shí)現(xiàn)展開的效果,這里給大家還需要做一件事情推正,就是對(duì)你需要默認(rèn)展開那一行的td>div中el-table__expand-icon 這個(gè)class 執(zhí)行click()事件恍涂。
el-table-column使用v-if導(dǎo)致數(shù)據(jù)渲染錯(cuò)亂
編輯表格時(shí),使用v-if控制列表的顯隱植榕,發(fā)現(xiàn)會(huì)有隨機(jī)列位置錯(cuò)亂與數(shù)據(jù)錯(cuò)亂現(xiàn)象再沧。 這是因?yàn)樵趘-for或者v-if切換標(biāo)簽時(shí),多個(gè)相同的標(biāo)簽被渲染尊残,如果不添加key來區(qū)分則會(huì)出現(xiàn)復(fù)用的情況炒瘸。而原本這些標(biāo)簽每一個(gè)都是獨(dú)立的淤堵,于是需要添加key來做區(qū)分!
表格是element-ui通過循環(huán)產(chǎn)生的顷扩,而vue在dom重新渲染時(shí)有一個(gè)性能優(yōu)化機(jī)制粘勒,就是相同dom會(huì)被復(fù)用,這就是問題所在屎即,所以庙睡,通過key去標(biāo)識(shí)一下當(dāng)前行是唯一的,不許復(fù)用技俐,就行了乘陪。
<el-table-column
v-if="operate_type==2"
:key="Math.random()"
prop="table"
label="table"
/>
注:這里有個(gè)大坑,若是表格上面有輸入框雕擂,表格會(huì)一直閃爍