조건부로 열을 숨기는 기능을 구현하기 위해 Vuetify의 v-data-table을 예로 들어 보겠습니다.

Question

v-data-table 및 actions 열이 있는 테이블이 있는데 사용자에게 특정 권한이 있는 경우에만 이 열을 표시하고 싶습니다. 권한을 확인하기 위해 mixin을 사용하고 있습니다.

다음을 시도했지만 성공하지 못했습니다.

<template v-slot:[`header.actions`]="{ 헤더 }" v-if="hasPermission('업데이트 센터 ')">
  {{ 헤더.텍스트 }}
</템플릿>

구성요소 파일에서 믹스인을 사용하는 방법은 다음과 같습니다.

"../layouts/Base/Base.vue"에서 BaseLayout 가져오기;;
"../../../mixins/hasPermissions"에서 hasPermission 가져오기;;
        
기본값 내보내기 {
  믹스인: [hasPermission],
...
}

결과: [1]: https://i.stack.imgur.com/aVSgJ.png

Answer 1

header.actions 是一个用于覆盖 actions 列标题渲染的插槽。如果你不传递它（当条件为 false) Vuetify는 기본 표현을 렌더링합니다.

특정 열을 조건부로 숨기려면(렌더링하지 않음) 테이블 헤더를 computed

로 정의하세요. 으아악