zoukankan      html  css  js  c++  java
  • 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 = data.data.order_goods_list; this.toggle(this.signtableData)

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



  • 相关阅读:
    又玩起了“数独”
    WebService应用:音乐站图片上传
    大家都来DIY自己的Blog啦
    CSS导圆角,不过这个代码没有怎么看懂,与一般的HTML是不同
    网站PR值
    CommunityServer2.0何去何从?
    网络最经典命令行
    炎热八月,小心"落雪"
    Topology activation failed. Each partition must have at least one index component from the previous topology in the new topology, in the same host.
    SharePoint 2013服务器场设计的一些链接
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/13044623.html
Copyright © 2011-2022 走看看