Take Vuetify's v-data-table as an example to implement the function of conditionally hiding columns-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Take Vuetify's v-data-table as an example to implement the function of conditionally hiding columns

P粉775723722 2023-08-25 14:48:06

453

I have a table with columns v-data-table and actions and I want to display this column only if the user has certain permissions. I'm using a mixin to check permissions.

I tried the following without success:

This is how I use the mixin in the component file:

import BaseLayout from "../layouts/Base/Base.vue"; import hasPermission from "../../../mixins/hasPermissions"; export default { mixins: [hasPermission], ... }

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

P粉775723722

reply all (1)

P粉6814003072023-08-26 09:25:31 1 floor

header.actionsis a slot used to overrideactionscolumn header rendering. If you don't pass it (when the condition isfalse), Vuetify will render the default representation.

If you want to conditionally hide (not render) certain columns, define your table header ascomputed

computed: { headers() { const headers = [ // 其他表头定义 ] if(this.hasPermission('update center')) { headers.push({ // actions 表头定义 }) } return headers } }