Vue-Watch中获取节点——使用elementUI的table组件渲染

近一次项目中需要监听传入的Id变化,所以使用了computed和watch结合的方式来进行监听

computed: {
    listenId: function() {
      return this.form.interviewId
    }
  },
  watch: {
    listenId(val, oldVal) {
    
    }
  },

因为涉及到表单渲染的问题,UI用的是elementUI,表单里有table表单,需要渲染多选框的问题,但是按照elementUI的table-API来进行渲染复选框,总是报错拿不到我的table实例(此时我是在watch中获取的实例),后来查阅发现,原来是因为节点都还没有渲染完毕就去获取了,这时候是拿不到的。
更改之后的方法:

listenId(val, oldVal) {
      if (val) {
        this.$nextTick(() => {
          // 渲染table业务
          this.$refs.industryRef.toggleRowSelection(row)
        })
      }
    }

还有一个就是当关闭子组件(也就是我渲染完毕的这个组件),需要清除table上的所有选中框,如果不清除,当再一次进入之后table上的多选框是不显示的,后来我也打印了destroyed的钩子函数,也没有执行。
因为我的子组件是Dialog,所以我在他的close事件中添加了清除所有复选框的API,这时候在此进入就没有问题了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue使用View-Design的table组件,出现columns循环调用加载多次的问题,可能是由于以下原因导致的: 1. 在mounted钩子函数动态设置了columns属性,导致在每次组件渲染时都会重新加载columns。 2. 在获取数据后动态设置了columns属性,但是没有判断columns是否已经加载过,导致重复加载。 针对以上问题,可以考虑以下解决方案: 1. 在组件的data选项预先定义好columns属性,避免在获取数据后动态设置columns导致的重复加载。 2. 在组件的created钩子函数获取数据,并在获取到数据后设置table组件的columns属性。如果需要动态更新columns,可以在获取到数据后使用一个布尔值变量来标记是否已经加载过columns,避免重复加载。 3. 如果需要动态更新columns,可以使用watch监听数据变化,并在数据变化时动态更新columns属性。需要注意的是,要避免在watch回调函数直接给columns赋值,而是应该使用Vue.set方法来更新columns,以保证响应式更新。 示例代码如下: ```javascript export default { data() { return { columns: [], // 预先定义好columns属性 hasLoadedColumns: false // 布尔值变量控制columns是否已经加载过 }; }, created() { // 异步获取数据 fetchData().then(data => { // 设置columns属性 this.columns = generateColumns(data); // 标记columns已经加载过 this.hasLoadedColumns = true; }); }, watch: { // 监听数据变化 tableData(newValue) { if (this.hasLoadedColumns) { // 使用Vue.set方法更新columns Vue.set(this, "columns", generateColumns(newValue)); } } } }; ``` 希望以上方案能够帮助您解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值