赞
踩
目的:由于权限问题,希望在某些router下,JvxeTable的JvxeToolbar所有按钮不要出现。
首先,先了解一下JvxeTable的toolbar是怎么控制按钮的:
<a-button v-if="showAdd" icon="plus" @click="trigger('add')" :disabled="disabled" type="primary">新增</a-button>
<a-button v-if="showSave" icon="save" @click="trigger('save')" :disabled="disabled">保存</a-button>
原来是通过showXXX来控制是否显示按钮,那么再看一下showXXX是以什么方式出现:
computed: {
btns() {
let arr = this.toolbarConfig.btn || ['add', 'remove', 'clearSelection']
let exclude = [...this.excludeCode]
// TODO 需要将remove替换batch_delete
// 系统默认的批量删除编码配置为 batch_delete 此处需要转化一下
if(exclude.indexOf('batch_delete')>=0){
exclude.push('remove')
}
// 按钮权限 需要去掉不被授权的按钮
return arr.filter(item=>{
return exclude.indexOf(item)<0
})
},
showAdd() {
return this.btns.includes('add')
},
showSave() {
return this.btns.includes('save')
},
...
}
它出现在computed里面,其实最终是受toolbarConfig.btn控制(题外话,jvxetable传toolbarConfig参数给jvxetoolbar,把btn写错了,table里面定义的是btns而toolbar里面取值用的btn,这种bug让人有些无语)。
那么也就是说,想要控制toolbar的按钮是否显示,改变其toolbarConfig.btn这个参数值就可以了,而toolbarConfig则与jvxetable的toolbarConfig绑定在一起,所以不能直接改变toolbar.toolbarConfig.btn的值,也不能直接修改jvxetable.toolbarConfig.btn的值,因为这样是不会触发Computed下的相关属性重新刷新的。
而需要通过Vue的set方法才能既改变属性值又能触发Computed重新刷新,具体 https://cn.vuejs.org/v2/api/#Vue-set
而这里,我用了set的实例化的实现$set来修改,由于set( target, propertyName/index, value )的第2个参数propertyName不支持多级属性(如"aa.bb"),所以只能:
created () {
//console.log("main form type:"+this.type)
if (this.type!='edit'){
this.$nextTick(()=>{
let mtMain=this.$refs.smpOrderMtMain
//console.log(mtMain.$options.name)
let toolbarConfig=mtMain.toolbarConfig
this.$set(toolbarConfig,'btn',[])
let mtAss=this.$refs.smpOrderMtAss
toolbarConfig=mtAss.toolbarConfig
this.$set(toolbarConfig,'btn',[])
})
}
...
最后JvxeTable的Toolbar不显示了。
而值得注意的是,如果有不同的router调用相同的vue,这个type要放到computed以便获得实时的fullPath:
computed: {
type(){
//"edit", //edit - 输入, purchase - 采购
let currentRoute = Object.assign({}, this.$route)
return currentRoute.fullPath.endsWith("smpPurchase")?"purchase":"edit"
} ,
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。