学习vue过程当中遇到的问题

一、vue-quill-editor动态禁用

项目中把vue-quill-editor单独封装成了一个组件，经过props传递readOnly参数来设置是否禁用editor。开发中发现能够实现禁用效果，但取决于第一次打开这个编辑器的状态，若是第一次打开时readOnly参数为true，那么后面一直都是true，尽管传入的readOnly参数不一样。

<editor v-model="form.noticeContent" :min-height="192" :read-only="form.status === '1'" />

经过调试发现是vue-quill-editor在页面渲染完后只初始化一次，若是在init方法中进行设置，那么只会设置一次。

根据官方文档，能够把动态禁用移到状态改变事件中（onEditorFocus、text-change、selection-change、editor-change等），这样就能够实现动态禁用效果了。

二、vue里实现路由跳转

就是点击按钮，打开另外一个tab页面，而不是页面里的弹窗。这在通常的前端项目里，直接使用a标签就能够。

虽然在vue里也有相似的，即<router-link>标签，渲染后就是a标签。

关于路由跳转有不少方式，这里我选用this.$router.push({ path: })的方式，写上页面路径一直404，由于要实现路由的调整，因此要跳转的页面都须要加入路由列表，否则找不着。

router/index.js里添加

{
    path: '/notice',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'add',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '新增公告' }
      },
      {
        path: 'edit/:noticeId(\\d+)',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '修改公告' }
      }
    ]
  }

这样你要跳转到新增页面或者修改页面，就能够像下面这样写

/** 新增按钮操做 */
      handleAdd() {
        this.$router.push({ path: '/notice/add' })
      },
      /** 修改按钮操做 */
      handleUpdate(row) {
        const noticeId = row.noticeId || this.ids[0]
        this.$router.push({ path: '/notice/edit/' + noticeId })
      }

三、莫名其妙的错误

vue的热更新有时候真的不能相信，你的代码或许真的没问题，你只是须要重启让它冷静一下。

四、el-button的@click方法点击失效

下面的代码，点击按钮，两个都打印了，但却没有执行submitNotice方法

/** 发布按钮操做 */
      handleSubmit() {
        if (this.noticeId === undefined) {
          this.msgError("发布失败")
          return
        }
        this.$confirm('是否确认发布该公告?', "警告", {
          confirmButtonText: "肯定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          console.log('11111')
          return submitNotice(this.noticeId)
        }).then(() => {
          this.msgSuccess("发布成功")
          this.getDetails(this.noticeId)
        }).catch(() => {});
      },

下面这样修改就能够了。。

这俩写法貌似没啥区别啊。。经过查资料，我估计就是这个this的问题。this的做用域不一样

参考：http://www.javashuo.com/article/p-qvnzzbtk-hc.html

五、父组件传入子组件的值更新，子组件不会从新渲染

父组件调用子组件，传入deptId，当deptId更新时，子组件不会从新加载

<post :deptId="form.deptId" />

子组件接受值

props: {
    deptId: {
      type: Number,
      default: -1
    }
  },

须要在watch中监听子组件参数变化，而后执行须要的逻辑

watch: {
    deptId: {
      handler: function (val, oldVal) {
        this.inputDeptId = val
        if (val !== -1) {
          this.getList();
        }
      },
      deep: true
    }
  },

参考：http://www.cxyzjd.com/article/zhengyinling/93485296

六、vue-treeselect下拉选择的时候，被遮挡住

根据官方文档，为标签设置属性:appendToBody="true"，将菜单追加到body便可。

七、数据库tinyint类型，实体类须要设置为Boolean类型而不是boolean类型，由于boolean类型默认为false，而Boolean能够为null，在列表条件查询时，默认为false可能会获得不正确的数据。

八、有的页面启动后第一次打开样式错乱，刷新后正常。

考虑是否是css样式和页面加载的顺序问题，css加载慢了，因此出现这个问题，有待调试。

九、el-upload多文件上传时，点击上传到服务器却唤醒了文件选择框

解决：须要在选取文件的按钮加上属性slot="trigger"

持续更新