【概要】
Element PlusのExpandable rowのサンプルコードを見てスロットを使用している<template #default="props">配下のデータがどのように渡されているのか気になりました。
（そもそもスロット自体の理解もあいまいだったので、スロットの勉強も含めて理解したいと思いました）
そこで実装コードを読んで超ざっくりと理解できたことを、超ざっくりと解説します。
【環境】
Element Plus 2.3.14
【説明用コード】
こちらのコードをもとに説明していきます。
上記リンク先にある同じコード
<template>
<el-table :data="tableData">
<el-table-column type="expand">
<template #default="props">
<div>
<p>年齢: {{ props.row.age }}</p>
<p>性別: {{ props.row.gender }}</p>
</div>
</template>
</el-table-column>
<el-table-column label="ユーザid" prop="id" />
<el-table-column label="名前" prop="name" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
id: 1,
name: '佐藤',
age: 20,
gender: '男',
},
]
</script>
【ローカル開発手順】
（VSCodeだとpnpmコマンドを使うには、PowerShellではなくGit Bashを利用する必要がありました）
【コード解説】
コードは必要箇所を抜粋しています。
1. el-table
まず前提としてel-tableやel-table-columnというタグはvueのコンポーネントです。
とりあえず一番の親であるel-tableのコードを見てみます。
<slot />があるので、ここにel-table-column配下の要素が入りそうです。
しかし、レンダリングされた画面ではこの<slot />で宣言された箇所には要素が入っていません。
では、どこにレンダリングされるのでしょうか？
<div ref="hiddenColumns" class="hidden-columns">
<slot />
</div>
<slot />で宣言された箇所には中身のないdivが3つあるだけです。
年齢・性別の拡張表示要素はtbody配下にレンダリングされているのが確認できます。
tbodyを表示しているのは下記箇所です。
<table-body
:context="context"
:highlight="highlightCurrentRow"
:row-class-name="rowClassName"
:tooltip-effect="tooltipEffect"
:tooltip-options="tooltipOptions"
:row-style="rowStyle"
:store="store"
:stripe="stripe"
/>
2. table-body
table-bodyの実装を見ると、render関数でwrappedRowRenderの結果を返しています。
では、wrappedRowRenderの定義を確認してみましょう。
render() {
const { wrappedRowRender, store } = this
const data = store.states.data.value || []
// Why do we need tabIndex: -1 ?
// If you set the tabindex attribute on an element ,
// then its child content cannot be scrolled with the arrow keys,
// unless you set tabindex on the content too
// See https://github.com/facebook/react/issues/25462#issuecomment-1274775248 or https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex
return h('tbody', { tabIndex: -1 }, [
data.reduce((acc: VNode[], row) => {
return acc.concat(wrappedRowRender(row, acc.length))
}, []),
])
},
useRenderの結果を使っています。
では、useRenderの定義を確認してみましょう。
const { wrappedRowRender, tooltipContent, tooltipTrigger } =
useRender(props)
useRenderからwrappedRowRenderの定義を抜粋したものです。
renderExpandedでの結果を返しています。
では、renderExpandedの定義を確認してみましょう。
const wrappedRowRender = (row: T, $index: number) => {
const store = props.store
const { isRowExpanded, assertRowKey } = store
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =
store.states
const columns = store.states.columns.value
const hasExpandColumn = columns.some(({ type }) => type === 'expand')
if (hasExpandColumn) {
const expanded = isRowExpanded(row)
const tr = rowRender(row, $index, undefined, expanded)
const renderExpanded = parent.renderExpanded
if (expanded) {
if (!renderExpanded) {
console.error('[Element Error]renderExpanded is required.')
return tr
}
// 使用二维数组，避免修改 $index
// Use a matrix to avoid modifying $index
return [
[
tr,
h(
'tr',
{
key: `expanded-row__${tr.key as string}`,
},
[
h(
'td',
{
colspan: columns.length,
class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,
},
[renderExpanded({ row, $index, store, expanded })]
),
]
),
],
]
}
3. table-column
slots.defaultがある場合にslots.default(data)を返しています。
if (column.type === 'expand') {
// 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
column.renderCell = (data) =>
h(
'div',
{
class: 'cell',
},
[originRenderCell(data)]
)
owner.value.renderExpanded = (data) => {
return slots.default ? slots.default(data) : slots.default
}
} else {
owner.value.renderExpanded = (data) のdataについてconsole.log(data.row)を使ってデータを確認してみると、このようになりました。
あとは、slots.default(data)がこのデータをtemplateタグ内のprops.row.ageとかに紐づけているわけですね。
{
"id": 1,
"name": "佐藤",
"age": 20,
"gender": "男"
}
【参考サイト】