業務需要表格能夠展開某一行，但組件中只能展開所有行，或者用table的樹形數據(row 中需包含 children字段)，可以通過控制 row-class-name來定義表格中需要展開的行。

通過設置 type="expand" 和 Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內容

:row-class-name="setClassName"

:data="paramsTableData">

fixed="left"

type="expand" // 給當前clumn設置

width="30"

align="center"

>

{{props.row.resObject}} // 展開時顯示的內容

min-width="110"

:show-overflow-tooltip="true"

align="center"

:prop="item.prop"

:label="item.label"

/>

// 邏輯代碼

methods: {

setClassName({row, rowIndex}){

// 在這里寫判斷條件，控制哪些行可展開，那些行不可展開

if(row.resObject == null){

return 'hide-expand' // 不可展開

}else{

return '' // 可展開

}

},

}

// css代碼 不可展開的行既沒有右箭頭，也無法點擊

.hide-expand .el-table__expand-column .cell {

display: none;

}

示例圖

image.png

總結

以上是生活随笔為你收集整理的html表格展开明细,Element-ui的Table表格展开行功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。