iView+VUE根据数据设置表格行高亮

iView+VUE根据数据设置表格行高亮,第1张

我这里的业务场景是左侧列表点击各行 会显示其对应的数据在右侧 现将右侧一数据移动到左侧另一行麾下 当前选中高亮行应进行切换

这里采取监听方式 监听用户是否对数据进行了移动到其他地方 如果有 将移动到的地方的某一个唯一数据(如id)通过父子间传值 最后监听改变高亮行

父子间传值方式 详情请另学习 这里不多说

this.$emit() 

props 

props: {

    addIndustryId:{

      type:String

    }

  }

得到需要高亮行的数据

监听高亮行数据的变化

遍历当前表格数据 判断相等 则设置该行高亮

watch:{

    //动态设置高亮行

    addIndustryId(val){

      let table = this.$refs.industryTable.rebuildData

      table.map((item,index) => {

        if(item.industry_id === val){

          this.$refs.industryTable.highlightCurrentRow(index)

        }

      })

    }

  }

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/942551.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表(0条)

保存