在這之前請看我上一篇部落格https://blog.csdn.net/qq_41594146/article/details/83381964,這裡有思路和資料庫設定,之前做的是沒有元件化,也就是單純的v-for迴圈直接顯示,剛剛寫了按鈕許可權的元件,現在貼上程式碼\

    var  myButton=Vue.extend({//設定標籤
        props:['names','item2'],//names為按鈕名,item2為資料
        template:'<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>'
    })
    Vue.component('my-button',myButton);//註冊元件
 

在頁面上使用:

 <my-button names="刪除" v-bind:item2="btdata" ></my-button>
 <my-button names="修改" v-bind:item2="btdata" ></my-button>

如果該角色有這個許可權,則顯示,沒有則不顯示