关于循环表格高亮展示的问题

@TOC

在项目中，难免会遇到一个页面会展示多个表格，下面以elementui的table为例，当我点击其中一个表格的某一行时，使其高亮显示，这是很简单的，只需要设置一个属性highlight-current-row即可实现，但是当我循环渲染多个表格的时候，那么问题就来了

只操作当前表格还是很好说的，高亮就行了，但是点击另一个表格的某一行，上一个表格仍然还在高亮显示。这样就会给用户造成一定的困扰，我到底点击的是哪一行呢？

上代码：

效果如下：

在这里插入图片描述

此时你会看到两个表格都会有高亮显示，那么要怎样才能只显示当前表格的当前行呢？

1. 设置ref ，将每一个表格都设置一个唯一的ref；

2. 设置点击事件，@row-click用来处理高亮的，点击输出refs，效果如下：

   在这里插入图片描述

3. 使用refs里面的setCurrentRow方法来取消所有高亮，然后再设置点击的那一行的高亮，代码如下

getRow(row){

          console.log(this.$refs,row);

            let { list } = this;

            for(let i = 0, len = list.length; i < len; i++){

                //这里用来取消所有高亮

                this.$refs['tableRef'+i][0].setCurrentRow();

            }

            let iNow = 0;

            list.forEach((item,index)=>{

                item.detailList.forEach(item2=>{

                    // 实际项目中都会有唯一键，这里为了简单就不再添加，用name代替判断

                    if(item2.name == row.name){

                        return iNow = index;

                    }

                })

            })

            this.$refs['tableRef'+iNow][0].setCurrentRow(row);

        }

效果如下：

在这里插入图片描述

OK 大功告成！！！

完整代码：

总结：这主要是对取消选中函数setCurrentRow的应用，这个只是一个简单的例子，在实际项目中的数据结构可能要复杂的多。最后，由于项目中数据量过大，数据结构过于复杂，导致dom渲染缓慢，欢迎各位大神发表言论，解决瓶颈，提供优化方案，谢谢大家！！！