Ambil jadual v-data Vuetify sebagai contoh untuk melaksanakan fungsi menyembunyikan lajur secara bersyarat

Question

Saya mempunyai jadual dengan lajur v-data-table dan actions dan saya mahu memaparkan lajur ini hanya jika pengguna mempunyai kebenaran tertentu. Saya menggunakan mixin untuk menyemak kebenaran.

Saya mencuba yang berikut tidak berjaya:

Beginilah cara saya menggunakan mixin dalam fail komponen: 
import BaseLayout daripada "../layouts/Base/Base.vue";
import hasPermission daripada "../../../mixins/hasPermissions";
        
eksport lalai {
  mixins: [hasPermission],
...
}

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

Answer 1

header.actions 是一个用于覆盖 actions 列标题渲染的插槽。如果你不传递它（当条件为 false), Vuetify akan memberikan perwakilan lalai.

Jika anda ingin menyembunyikan (bukan memaparkan) lajur tertentu secara bersyarat, takrifkan pengepala jadual anda sebagai computed

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

    return headers
  }
}