最近項(xiàng)目寫(xiě)到一個(gè)業(yè)務(wù)砂缩，首先需要展示各類(lèi)分組的基本信息，然后需要點(diǎn)擊每個(gè)分組展示該分組下子的所有具體信息
一開(kāi)始我是打算用tab來(lái)展示就是首先父分組的名稱(chēng)就是各個(gè)不同的tab按鈕三娩，然后點(diǎn)擊按鈕再展示不同的子表格信息
but...產(chǎn)品說(shuō)不行庵芭，要一開(kāi)始就展示一個(gè)表格，然后每一行可以點(diǎn)擊下拉雀监，再展示一個(gè)子表格
然后我就在餓了么官網(wǎng)尋找有沒(méi)有對(duì)應(yīng)的組件双吆，當(dāng)我看見(jiàn)下面這個(gè)組件時(shí)很開(kāi)心以為可以直接用了
但是，當(dāng)我點(diǎn)開(kāi)始發(fā)現(xiàn)并不是我想要的那樣
這里的子表格并沒(méi)有表頭会前，而且和父表格的表頭內(nèi)容一樣好乐，并不是自定義的
然后又找了一個(gè)，這里也只是展示了每行信息的詳情
這時(shí)候我們?cè)撛趺崔k呢瓦宜？自己重新寫(xiě)個(gè)組件蔚万？還是直接把el的源碼拿過(guò)來(lái)修改源碼樣式？寫(xiě)出來(lái)倒是不難临庇，但是時(shí)間不允許啊反璃，同時(shí)你還要考慮各種兼容性，以及樣式風(fēng)格
然后又看了一下上面這個(gè)代碼假夺，這里是個(gè)form表單淮蜈，那我可不可以把它換成一個(gè)個(gè)性化的表格呢
然后我在代碼里這樣寫(xiě)
<!-- 展開(kāi)子表格 -->
<el-table-column type="expand"
align="center">
<template slot-scope="props">
<el-table :data="props.row.dicts">
<el-table-column prop="label"
label="名稱(chēng)">
</el-table-column>
<el-table-column prop="value"
label="值">
</el-table-column>
<el-table-column prop="sort"
label="排序">
</el-table-column>
<el-table-column prop="remarks"
show-overflow-tooltip
label="備注">
</el-table-column>
<!-- 子表格操作列 -->
<el-table-column header-align="center"
align="center"
width="160"
label="操作">
<template slot-scope="scope">
<el-button-group>
<el-button size="mini"
title="編輯"
type="primary"
circle
@click="handleEditDict(scope.row)">
<i class="fa fa-pencil"></i>
</el-button>
<el-button size="mini"
title="刪除"
type="danger"
circle
@click="handleDeleteDict(scope.row)">
<i class="fa fa-trash-o"></i>
</el-button>
</el-button-group>
</template>
</el-table-column>
然后運(yùn)行代碼↓perfect
下面就是子表格的數(shù)據(jù)該怎么渲染呢，這是個(gè)很關(guān)鍵的問(wèn)題已卷，而且我們還要實(shí)現(xiàn)那種懶加載梧田，點(diǎn)擊后才去請(qǐng)求后臺(tái)
看官網(wǎng)里表格里的事件方法
這時(shí)候給父表格加了這個(gè)事件
<!-- 數(shù)據(jù)表格 -->
<el-table row-key="id"
fit
highlight-current-row
:data="pageData.results"
:header-row-class-name="'table-head-th'"
@expand-change="handleExpendRow">
下面就在代碼里說(shuō)明如何進(jìn)行數(shù)據(jù)綁定
handleExpendRow(row, expandedRows) { //這里是點(diǎn)擊每一行會(huì)觸發(fā)的方法
if (!row.dicts) { //這里做了一個(gè)判斷，首先判斷這一行的數(shù)據(jù)對(duì)象有沒(méi)有dicts這個(gè)屬性，如果沒(méi)說(shuō)明沒(méi)有數(shù)據(jù)我們需要請(qǐng)求后臺(tái)裁眯，相當(dāng)于懶加載
this.queryDictData(row.id, row.labelType) //關(guān)鍵就是這個(gè)方法肖方，row.id是父分組的id需要傳給后臺(tái)查詢(xún)?cè)撟臃纸M的信息
}
},
queryDictData(id, labelType) {
let self = this
labelService.getLabels({ groupCode: labelType }).then(rspData => { //這里是我們項(xiàng)目里封裝的ajax請(qǐng)求方法，相當(dāng)于axios.post()
console.log(rspData)
const index = self.pageData.results.findIndex(data => data.id === id) //首先pageData.results綁定的是父表格的數(shù)據(jù)未状，那么我們要把子表格數(shù)據(jù)塞到對(duì)應(yīng)的父分組俯画，那我們要知道是哪一個(gè)分組，這里的findIndex就是通過(guò)id去查找對(duì)應(yīng)的父分組在數(shù)據(jù)數(shù)組里的下標(biāo)
if (rspData.data && rspData.data.length) {
rspData.data.forEach(item => { //這里我是給每個(gè)子分組信息里都加上父分組的id司草，以方便后面操作子表格每一行后艰垂，回調(diào)函數(shù)里刷新數(shù)據(jù)時(shí)需要用到，要知道他的父親是誰(shuí)埋虹，哈哈
item.labelId = id
})
}
self.$set(self.pageData.results[index], 'dicts', rspData.data) //這里就是給父表格數(shù)據(jù)數(shù)組self.pageData.results第index個(gè)對(duì)象加上dicts這個(gè)屬性猜憎，然后把rspData.data我們從后臺(tái)拿到的數(shù)據(jù)綁定到dicts這個(gè)key里
}) }
這時(shí)候我們刷新頁(yè)面就看到如下，成功完成下拉自定義個(gè)性自表格
