当前位置:网站首页>自定义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"
} ,
边栏推荐
- 隐藏在科技教育中的steam元素
- Pytoch learning (II)
- Cmake tutorial series -02- generating binaries using cmake code
- Global and Chinese markets of liquid optical waveguides 2022-2028: Research Report on technology, participants, trends, market size and share
- What files does a CA digital certificate contain? How to view SSL certificate information?
- Intel-Hex , Motorola S-Record 格式详细解析
- Cmake tutorial series -05- options and variables
- 外汇交易平台哪个好?有监管的资金就安全吗?
- Software testing skills, JMeter stress testing tutorial, transaction controller of logic controller (25)
- FDA ESG regulation: digital certificate must be used to ensure communication security
猜你喜欢
![[Postgres] Postgres database migration](/img/45/7074aa766640160a3b6f00b109cb2f.png)
[Postgres] Postgres database migration

什么是证书透明度CT?如何查询CT logs证书日志?

Study diary: February 15, 2022

如何在 JupyterLab 中把 ipykernel 切换到不同的 conda 虚拟环境?

什么是自签名证书?自签名SSL证书的优缺点?

Raki's notes on reading paper: neighborhood matching network for entity alignment

Unity timeline data binding

Pytoch learning (II)

什么是X.509证书?X.509证书工作原理及应用?

A quick look at the statistical data of 23 major cyber crimes from 2021 to 2022
随机推荐
在php中字符串的概念是什么
Creating exquisite skills in maker Education
Insert sort directly
Multi card server usage
重磅来袭--UE5的开源数字孪生解决方案
模板参数包和函数参数包
Differences among digicert, SECTIONO and globalsign code signing certificates
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.
隐藏在科技教育中的steam元素
FDA ESG regulation: digital certificate must be used to ensure communication security
Network neuroscience -- a review of network Neuroscience
Summary of knowledge points about eigenvalues and eigenvectors of matrices in Chapter 5 of Linear Algebra (Jeff's self perception)
CMake教程系列-05-选项及变量
(图论) 连通分量(模板) + 强连通分量(模板)
How long is the general term of the bank's financial products?
Merge sort
迅为恩智浦iTOP-IMX6开发平台
2022 the action of protecting the net is imminent. Things about protecting the net
Sitelock nine FAQs
Ffmpeg source code