iview树结构点击一次再次点击失效

本文探讨了JavaScript中数组深拷贝的问题,指出了使用`concat`和`Object.assign`进行深拷贝的局限性,并提供了一个自定义函数`_deepClone`来实现递归深拷贝,特别适用于包含函数的对象或数组。同时,文章强调了深拷贝在处理引用类型时的重要性,避免因引用导致的数据意外修改。
摘要由CSDN通过智能技术生成

在这里插入图片描述

在这里插入图片描述没有考虑到数组得引用 没有进行深拷贝得时候引用一直在点击树结构再更改数组中得值 失效,刚开始考虑到这个 使用concat但是这个只能对一级进行深拷贝所以是无效得 关于深拷贝处理方式

let colors=['red','green','blue',['football','basketball','volleyball']];  
let colors2=Object.assign([],colors);

没有function时候可以使用上图所示
当有function时

function _deepClone(source) {
  let target;
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}```

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue3 和 iView 中,可以通过设置 `highlight-row` 属性来实现 Table 表格的行高亮效果。而点击行高亮、再次点击取消高亮的效果,则需要通过自定义 `highlight` 方法来实现。 1. 在 Table 组件上添加 `highlight-row` 属性,指定高亮行的样式名: ```html <Table :data="tableData" highlight-row class-name="table-highlight"> <Table-column prop="name" label="姓名"></Table-column> <Table-column prop="age" label="年龄"></Table-column> </Table> ``` 2. 给 Table 组件绑定 `highlight` 事件,实现点击行高亮、再次点击取消高亮的效果: ```html <Table :data="tableData" highlight-row class-name="table-highlight" @highlight="handleHighlight"> <Table-column prop="name" label="姓名"></Table-column> <Table-column prop="age" label="年龄"></Table-column> </Table> ``` ```javascript export default { data() { return { tableData: [ { name: 'Tom', age: 18 }, { name: 'Jerry', age: 20 }, { name: 'Mike', age: 22 } ], highlightedRow: null }; }, methods: { handleHighlight(row, event) { if (this.highlightedRow === row) { this.highlightedRow = null; event.target.classList.remove('table-highlight'); } else { if (this.highlightedRow) { this.highlightedRow.$el.classList.remove('table-highlight'); } this.highlightedRow = row; event.target.classList.add('table-highlight'); } } } }; ``` 以上代码中,我们通过在 data 中定义 `highlightedRow` 变量来保存当前高亮的行,然后在 `handleHighlight` 方法中根据点击的行和当前高亮的行来判断是否需要取消高亮。如果当前高亮的行和点击的行相同,则取消高亮;否则,先取消当前高亮的行的高亮样式,再为点击的行添加高亮样式,并更新 `highlightedRow` 变量。注意,在添加和取消高亮样式时,需要通过 `event.target` 来获取当前点击的元素,并调用 `classList` 属性来添加或删除样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值