mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<template>
|
|
<el-table-v2
|
|
:columns="columns"
|
|
:data="data"
|
|
:estimated-row-height="50"
|
|
:expand-column-key="columns[0].key"
|
|
:width="700"
|
|
:height="400"
|
|
>
|
|
<template #row="props">
|
|
<Row v-bind="props" />
|
|
</template>
|
|
</el-table-v2>
|
|
</template>
|
|
|
|
<script lang="tsx" setup>
|
|
import { ref } from 'vue'
|
|
|
|
const detailedText = `Velit sed aspernatur tempora. Natus consequatur officiis dicta vel assumenda.
|
|
Itaque est temporibus minus quis. Ipsum commodiab porro vel voluptas illum.
|
|
Qui quam nulla et dolore autem itaque est.
|
|
Id consequatur ipsum ea fuga et odit eligendi impedit.
|
|
Maiores officiis occaecati et magnam et sapiente est velit sunt.
|
|
Non et tempore temporibus. Excepturi et quos. Minus distinctio aut.
|
|
Voluptatem ea excepturi omnis vel. Non aperiam sit sed laboriosam eaque omnis deleniti.
|
|
Est molestiae omnis non et nulla repudiandae fuga sit.`
|
|
|
|
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
|
|
Array.from({ length }).map((_, columnIndex) => ({
|
|
...props,
|
|
key: `${prefix}${columnIndex}`,
|
|
dataKey: `${prefix}${columnIndex}`,
|
|
title: `Column ${columnIndex}`,
|
|
width: 150,
|
|
}))
|
|
|
|
const generateData = (
|
|
columns: ReturnType<typeof generateColumns>,
|
|
length = 200,
|
|
prefix = 'row-'
|
|
) =>
|
|
Array.from({ length }).map((_, rowIndex) => {
|
|
return columns.reduce(
|
|
(rowData, column, columnIndex) => {
|
|
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
|
|
return rowData
|
|
},
|
|
{
|
|
id: `${prefix}${rowIndex}`,
|
|
parentId: null,
|
|
}
|
|
)
|
|
})
|
|
|
|
const columns = generateColumns(10)
|
|
const data = ref(
|
|
generateData(columns, 200).map((data) => {
|
|
data.children = [
|
|
{
|
|
id: `${data.id}-detail-content`,
|
|
detail: detailedText,
|
|
},
|
|
]
|
|
return data
|
|
})
|
|
)
|
|
|
|
const Row = ({ cells, rowData }) => {
|
|
if (rowData.detail) return <div class="p-6">{rowData.detail}</div>
|
|
return cells
|
|
}
|
|
|
|
Row.inheritAttrs = false
|
|
</script>
|
|
|
|
<style>
|
|
.el-table-v2__row-depth-0 {
|
|
height: 50px;
|
|
}
|
|
|
|
.el-table-v2__cell-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|