vxeTable在vxe-modal提示工具栏无法关联表格

在这里插入图片描述


一般情况我们直接在created钩子中去关联工具栏,这样写正常情况下没有问题

          const $tableRight = this.$refs.tableRefRight;
          const $toolbarRight = this.$refs.toolbarRefRight;
          if ($tableRight && $toolbarRight) {
    
    
            $tableRight.connect($toolbarRight);
          }
  • 在vxe-modal组件中,因为页面加载完,vxe-modal并没有渲染出来,一般需要特定的条件才能显示,一般就是点击才能出现模态框,所以初始化时,一般vxe-modal都是隐藏状态,更深一点就是DOM结构并没有渲染出来,所以created钩子调佣以上方法关联不到。

  • 正确的做法就是在打开模态框时,再调用以上的方法,这样等vxe-modal显示出来后,就可以找到dom节点进行绑定关联。

		//先显示模态框,紧接着进行绑定关联,在触发事件里进行关联,而不是created等钩子函数
        this.dialogVisibleRecord = true;
        this.$nextTick(() => {
    
    
          const $tableRight = this.$refs.tableRefRight;
          const $toolbarRight = this.$refs.toolbarRefRight;
          if ($tableRight && $toolbarRight) {
    
    
            console.log("666");
            $tableRight.connect($toolbarRight);
          }
        });

猜你喜欢

转载自blog.csdn.net/qq_34082921/article/details/138359254