• element中多选表格默认选中


    多选表格默认选中

    使用场景分析:
    进入页面表格数据渲染的时候,如果数据中paid是1的话,那么这一列表格就默认选中
    解决方法:
    后台数据返回后,使用element中的toggleRowSelection方法,这个方法用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)

    //先写一个方法
    toggle(data) {
      if (data.length) {
        this.$nextTick(function() {
          data.forEach(item => {
    		//如果数据中的paid == 1的话 让这一列选中
            if (item.paid == 1) {
    		//multipleTable 是这个表格的ref属性 true为选中状态
              this.$refs.multipleTable.toggleRowSelection(item, true);
            }
          })
        })
      }
    },
    
    //当获取到数据的时候调用下这个方法
    this.signtableData = res.data.user_info
    console.log(this.signtableData)
    this.toggle(this.signtableData)
    

    如果不加this.$nextTick的话不起作用
    官方文档是这样解释的:Vue 在更新 DOM 时是异步执行的,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用
    个人猜想是数据赋值后还没有给DOM绑定上 所以使用$nextTick等数据循环在dom上之后再调用这个方法就ok了

  • 相关阅读:
    公司某台电脑连接服务器共享文件失败(Windows找不到"\192.168.1.3)
    隐式转换题目;
    video设置autoplay 不起作用
    面试时遇到的题目。正则,replace()
    优化以及bug
    简单的异步函数async/await例子
    i==1 && resolve()
    命名
    通过ES6 Module看import和require区别
    从 0 到 1 合理高效使用 GitHub 的资料
  • 原文地址:https://www.cnblogs.com/my466879168/p/12443972.html
Copyright © 2020-2023  润新知