vue3+el-table,默认展开第一项
<template>
<div>
// 注: 如果tableData 中的id为数字,需要将id转换成字符串,因为expand-row-keys数组里面为 字符串 格式
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
:expand-row-keys="['3']"
>
<el-table-column prop="date" label="Date" sortable />
<el-table-column prop="name" label="Name" sortable />
<el-table-column prop="address" label="Address" sortable />
</el-table>
</div>
</template>
<script lang="ts" setup>
interface User {
id: number
date: string
name: string
address: string
hasChildren?: boolean
children?: User[]
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>