問(wèn)題
在父組件中定義一個(gè)屬性攒发,如phoneView: false调塌,在element的el-table組件header插槽內(nèi),使用這個(gè)屬性來(lái)做一些邏輯處理惠猿,如下代碼:
<div>
<el-table ...>
<el-table-column ...>
<template slot="header">
<div>
<span @click="phoneView = !phoneView">手機(jī)號(hào)碼</span>
<span v-if="phoneView">1</span>
<span v-else>2</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
在點(diǎn)擊事件修改phoneView的值之后羔砾,發(fā)現(xiàn)渲染的dom并沒(méi)有修改。經(jīng)過(guò)多次測(cè)試偶妖,發(fā)現(xiàn)在slot內(nèi)部phoneView的值并沒(méi)有改變姜凄,或者說(shuō)改變后,又變回去了
解決方法
將slot="header"改成#header就可以了趾访,如:
<div>
<el-table ...>
<el-table-column ...>
<template #header>
<div>
<span @click="phoneView = !phoneView">手機(jī)號(hào)碼</span>
<span v-if="phoneView">1</span>
<span v-else>2</span>
</div>
</template>
</el-table-column>
</el-table>
</div>