如何在q-table中设置默认展开首行？

当然可以，核心是控制Q-table用来管理展开状态的expanded数组，把首行的唯一标识（比如数据里的id）默认加入这个数组即可。

具体修改步骤： #

• 如果是Options API：
  在组件的data选项里，初始化expanded数组时，直接把首行数据的唯一标识放进去：

  data () {
    return {
      // 保留原有的treats数据
      treats: [
        { id: 1, name: '...', ... },
        // 其他行数据
      ],
      // 默认展开首行
      expanded: [this.treats[0].id]
    }
  }
  

• 如果是Composition API：
  初始化expanded响应式变量时，赋值为首行的唯一标识：

  import { ref, onMounted } from 'vue'
  
  export default {
    setup () {
      const treats = ref([
        { id: 1, name: '...', ... },
        // 其他行数据
      ])
      // 默认展开首行
      const expanded = ref([treats.value[0].id])
  
      return { treats, expanded }
    }
  }
  

注意事项： #

如果你的数据是异步加载的（比如从后端接口获取），需要在数据加载完成后再给expanded赋值：

// 以Composition API为例
onMounted(async () => {
  // 模拟异步获取数据
  const fetchedTreats = await fetchYourData()
  treats.value = fetchedTreats
  // 数据加载完成后，设置首行展开
  if (treats.value.length > 0) {
    expanded.value = [treats.value[0].id]
  }
})

内容的提问来源于stack exchange，提问作者RedDragon2001