栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

自定义JvxeTable的按钮及备注下$set的用法

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

自定义JvxeTable的按钮及备注下$set的用法

目的:由于权限问题,希望在某些router下,JvxeTable的JvxeToolbar所有按钮不要出现。

首先,先了解一下JvxeTable的toolbar是怎么控制按钮的:

新增
保存

原来是通过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"
      } ,
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/992052.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号