조건부로 열을 숨기는 기능을 구현하기 위해 Vuetify의 v-data-table을 예로 들어 보겠습니다.
<p><code>v-data-table</code> 및 <code>actions</code> 열이 있는 테이블이 있는데 사용자에게 특정 권한이 있는 경우에만 이 열을 표시하고 싶습니다. 권한을 확인하기 위해 mixin을 사용하고 있습니다. </p>
<p>다음을 시도했지만 성공하지 못했습니다. </p>
<pre class="brush:html;toolbar:false;"><template v-slot:[`header.actions`]="{ 헤더 }" v-if="hasPermission('업데이트 센터 ')">
{{ 헤더.텍스트 }}
</템플릿>
</pre>
<p>구성요소 파일에서 믹스인을 사용하는 방법은 다음과 같습니다. </p>
<pre class="brush:js;toolbar:false;">"../layouts/Base/Base.vue"에서 BaseLayout 가져오기;;
"../../../mixins/hasPermissions"에서 hasPermission 가져오기;;
기본값 내보내기 {
믹스인: [hasPermission],
...
}
</pre>
<p>결과: [1]: https://i.stack.imgur.com/aVSgJ.png</p>
