当前位置:网站首页>自定义JvxeTable的按钮及备注下$set的用法
自定义JvxeTable的按钮及备注下$set的用法
2022-06-30 02:48:00 【OK_boom】
目的:由于权限问题,希望在某些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"
} ,
边栏推荐
- Detailed explanation of minimum stack
- FDA ESG规定:必须使用数字证书保证通信安全
- Wechat applet page Jump and parameter transfer
- Cmake tutorial series -04- compiling related functions
- Raii memory management
- LeetCode 3. 无重复字符的最长子串
- Distributed file system fastdfs
- [dry goods sharing] the latest WHQL logo certification application process
- 002 color classification
- 身份证号的严谨判断精确到队后一位
猜你喜欢
What is the difference between a layer 3 switch and a layer 2 switch
什么是自签名证书?自签名SSL证书的优缺点?
Study diary: February 15, 2022
Heap sort
公司电脑强制休眠的3种解决方案
2022年7月深圳地区CPDA数据分析师认证
Série de tutoriels cmake - 02 - génération de binaires à l'aide du Code cmake
Wechat applet page Jump and parameter transfer
How to set password complexity and timeout exit function in Oracle
最小栈详解
随机推荐
Insert sort directly
[on] [DSTG] dynamic spatiotemporalgraph revolutionary neural networks for traffic data impact
Global and Chinese market of subscription revenue management software 2022-2028: Research Report on technology, participants, trends, market size and share
三层交换机和二层交换机区别是什么
Cmake tutorial series-01-minimum configuration example
Implementation of Sanzi chess with C language
PR second training notes
学术汇报(academic presentation)/PPT应该怎么做?
Several key points recorded after reviewing redis design and Implementation
什么是自签名证书?自签名SSL证书的优缺点?
Raki's notes on reading paper: neighborhood matching network for entity alignment
How to prevent phishing emails? S/mime mail certificate
C console format code
The rigorous judgment of ID number is accurate to the last place in the team
【npm】解决使用npm安装TypeORM的报错问题
FDA ESG regulation: digital certificate must be used to ensure communication security
Call collections Sort() method, compare two person objects (by age ratio first, and by name ratio for the same age), and pass lambda expression as a parameter.
Matlab code running tutorial (how to run the downloaded code)
Linear algebra Chapter 3 summary of vector and vector space knowledge points (Jeff's self perception)
Bubble sort