展示效果
在el-table
组件中有默认展开的属性expand-row-keys
需要配合row-key
使用,可能是我用的方式不对,用了不生效。所以我索性换一种解决方案。通过 Vue 的 ref 方法手动展开第一行。
1. 在 el-table 组件上添加 ref
首先,给 el-table 组件添加一个 ref,用于在代码中引用这个表格。
<el-table
ref="performanceTable"
row-key="performanceId"
v-loading="loading"
:data="list">
<!-- 省略内容 -->
</el-table>
2. 在表格数据加载完成后展开第一行
在 mounted
钩子或数据加载完成的回调中,使用 $refs.performanceTable
引用表格,然后调用 expandRow
方法展开第一行。
const loading = ref(true);
const list = ref([
// 示例数据
{
performanceId: 1, yearMonths: '2023-08', totalSelfScore: <