今天在做element-ui table 表格默認(rèn)選中時(shí)朴沿，卡了一會(huì)，去網(wǎng)上百度時(shí)發(fā)現(xiàn)講的都不是很清楚授艰，在這里記錄下辨嗽，希望能幫助到有相同問題的小伙伴。
需求：頁(yè)面初始化時(shí)淮腾，根據(jù)后臺(tái)返回的數(shù)據(jù)選中表格
項(xiàng)目環(huán)境：vue + element-ui
最終頁(yè)面效果如下：
1. 我使用的是element-ui表格中的 多選表格樣式
https://element.eleme.cn/#/zh-CN/component/table
2. 代碼編寫
<el-table
ref="multipleTable"
border
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"> // selection-change 當(dāng)選中或取消時(shí)觸發(fā)handleSelectionChange方法
<el-table-column
type="selection"
width="60">
</el-table-column>
<el-table-column
label="狀態(tài)"
width="200">
<template slot-scope="scope">
<!--is_open=0:對(duì)外不可見人員(紅色) is_open=1:對(duì)外可見人員(藍(lán)色)-->
<span v-if="scope.row.is_open===1" style="color:#1E9FFF">{{ formatNodeStatus(scope.row.is_open) }}</span>
<span v-else style="color: #FF5722">{{ formatNodeStatus(scope.row.is_open) }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="等級(jí)"
width="200">
</el-table-column>
<el-table-column
prop="address"
label="用戶昵稱"
show-overflow-tooltip>
</el-table-column>
</el-table>
<script>
export default {
name: 'nodesee',
data () {
return {
tableData: [],
}
},
// 跳轉(zhuǎn)到節(jié)點(diǎn)可見頁(yè)面
methods: {
getPower () {
getPower(qs.stringify(this.timeNode)).then(response => {
if (response.data.retcode === 2000) {
this.tableData = response.data.data.lablePowerList
} else {
this.$message.error(response.data.retmsg)
}
})
},
toggleSelection (rows) {
rows.forEach(row => {
if (row.isPower === 1) {
// toggleRowSelection 這個(gè)方法是用來選中某一行（打勾）
// row 是要選中的那一行
// true 是為選中
this.$refs.multipleTable.toggleRowSelection(row, true) }
})
},
handleSelectionChange (val) {
// val 是當(dāng)前選中的表格數(shù)據(jù)糟需，是數(shù)組類型
console.log(val)
}
},
created () {
this.getPower() // 初始化時(shí)頁(yè)面的數(shù)據(jù)
},
updated () {
// 在這里調(diào)用toggleSelection選中方法
this.toggleSelection(this.tableData)
}
}
</script>
3. 遇到的問題
最開始是在getPower中獲取到this.tableData后直接調(diào)用this.toggleSelection方法，發(fā)現(xiàn)頁(yè)面渲染后并沒有選中谷朝；我懷疑自己用錯(cuò)了方法洲押，直接使用官方demo中通過點(diǎn)擊事件觸發(fā)this.toggleSelection方法，發(fā)現(xiàn)選中起效果了圆凰，這說明方法并沒有用錯(cuò)杈帐。
這說明可能是頁(yè)面渲染出來后再調(diào)用this.toggleSelection方法才能選中，所以我先在mounted中調(diào)用this.toggleSelection方法专钉，頁(yè)面渲染后也沒有選中挑童，然后我就去updated中調(diào)用this.toggleSelection方法，結(jié)果頁(yè)面渲染選中跃须，就實(shí)現(xiàn)了表格默認(rèn)選中~~~
4. vue 生命周期
生命周期參考這位大神的站叼。。菇民。
原文：https://blog.csdn.net/mqingo/article/details/86031260
- 什么是生命周期：從Vue實(shí)例創(chuàng)建尽楔、運(yùn)行投储、到銷毀期間，總是伴隨著各種各樣的事件翔试，這些事件轻要，統(tǒng)稱為生命周期！
- [生命周期鉤子]( https://cn.vuejs.org/v2/api/ #選項(xiàng)-生命周期鉤子)：就是生命周期事件的別名而已垦缅；
- 生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
- 主要的生命周期函數(shù)分類：
- 創(chuàng)建期間的生命周期函數(shù)：
- beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來冲泥，此時(shí)，還沒有初始化好 data 和 methods 屬性
- created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK壁涎，此時(shí) data 和 methods 已經(jīng)創(chuàng)建OK凡恍，此時(shí)還沒有開始 編譯模板
- beforeMount：此時(shí)已經(jīng)完成了模板的編譯，但是還沒有掛載到頁(yè)面中
- mounted：此時(shí)怔球，已經(jīng)將編譯好的模板嚼酝，掛載到了頁(yè)面指定的容器中顯示
- 運(yùn)行期間的生命周期函數(shù)：
- beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)， 此時(shí) data 中的狀態(tài)值是最新的竟坛，但是界面上顯示的 數(shù)據(jù)還是舊的闽巩，因?yàn)榇藭r(shí)還沒有開始重新渲染DOM節(jié)點(diǎn)
- updated：實(shí)例更新完畢之后調(diào)用此函數(shù)，此時(shí) data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)担汤，都已經(jīng)完成了更新涎跨，界面已經(jīng)被重新渲染好了！
- 銷毀期間的生命周期函數(shù)：
- beforeDestroy：實(shí)例銷毀之前調(diào)用崭歧。在這一步隅很，實(shí)例仍然完全可用。
- destroyed：Vue 實(shí)例銷毀后調(diào)用率碾。調(diào)用后叔营，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除所宰，所有的子實(shí)例也會(huì)被銷毀绒尊。
