自定义JvxeTable的按钮及备注下$set的用法_vxe-table toolbar

目的：由于权限问题，希望在某些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>
1
2

原来是通过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')
      },
      ...
}      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

它出现在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',[])
        })
      }
      ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后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"
      } ,
1
2
3
4
5
6