in packages/element/src/array-table/index.ts [441:569]
setup(props, { attrs, listeners, slots }) {
const fieldRef = useField<ArrayField>()
const schemaRef = useFieldSchema()
const prefixCls = `${stylePrefix}-array-table`
const { getKey, keyMap } = ArrayBase.useKey(schemaRef.value)
const defaultRowKey = (record: any) => {
return getKey(record)
}
return () => {
const props = attrs as unknown as IArrayTableProps
const field = fieldRef.value
const dataSource = Array.isArray(field.value) ? field.value.slice() : []
const pagination = props.pagination
const sources = getArrayTableSources(fieldRef, schemaRef)
const columns = getArrayTableColumns(sources)
const renderColumns = (startIndex?: Ref<number>) => {
return columns.map(({ key, render, asterisk, ...props }) => {
const children = {} as Record<string, any>
if (render) {
children.default = render(startIndex)
}
if (asterisk) {
children.header = ({ column }: { column: ElColumnProps }) =>
h(
'span',
{},
{
default: () => [
h(
'span',
{ class: `${prefixCls}-asterisk` },
{ default: () => ['*'] }
),
column.label,
],
}
)
}
return h(
ElTableColumn,
{
key,
props,
},
children
)
})
}
const renderStateManager = () =>
sources.map((column, key) => {
//专门用来承接对Column的状态管理
if (!isColumnComponent(column.schema)) return
return h(
RecursionField,
{
props: {
name: column.name,
schema: column.schema,
onlyRenderSelf: true,
},
key,
},
{}
)
})
const renderTable = (
dataSource?: any[],
pager?: () => VNode,
startIndex?: Ref<number>
) => {
return h(
'div',
{ class: prefixCls },
{
default: () =>
h(
ArrayBase,
{
props: {
keyMap,
},
},
{
default: () => [
h(
ElTable,
{
props: {
rowKey: defaultRowKey,
...attrs,
data: dataSource,
},
on: listeners,
},
{
...slots,
default: () => renderColumns(startIndex),
}
),
pager?.(),
renderStateManager(),
renderAddition(),
],
}
),
}
)
}
if (!pagination) {
return renderTable(dataSource, null)
}
return h(
ArrayTablePagination,
{
attrs: {
...(isBool(pagination) ? {} : pagination),
dataSource,
},
},
{ default: renderTable }
)
}
},