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

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

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

上代码：

 <template>
    <div style="width:600px;margin:100px auto">
        <div style="margin-bottom:10px" v-for="(item,index) in list" :key="index">
            <el-table
                :data="item.detailList"
                highlight-current-row
                style="width: 600">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
            </el-table>
        </div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
            list:[
                {
                    id:1,
                    detailList:[
                        {
                            date: '2016-05-02',
                            name: '狄仁杰',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-04',
                            name: '孙尚香',
                            address: '上海市普陀区金沙江路 1517 弄'
                        }, {
                            date: '2016-05-01',
                            name: '宫本',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '亚瑟',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }
                    ]
                },
                {
                    id:2,
                    detailList:[
                        {
                            date: '2016-05-02',
                            name: '蔡文姬',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-04',
                            name: '李白',
                            address: '上海市普陀区金沙江路 1517 弄'
                        }, {
                            date: '2016-05-01',
                            name: '孙悟空',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '貂蝉',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }
                    ]
                }
            ]
        }
      },
    }
  </script>

效果如下：

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

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

<template>
   <div style="width:600px;margin:100px auto">
       <div style="margin-bottom:10px" v-for="(item,index) in list" :key="index">
           <el-table
               :data="item.detailList"
               :ref="'tableRef'+index"
               highlight-current-row
               @row-click="getRow"
               style="width: 600">
               <el-table-column
                   prop="date"
                   label="日期"
                   width="180">
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="姓名"
                   width="180">
               </el-table-column>
               <el-table-column
                   prop="address"
                   label="地址">
               </el-table-column>
           </el-table>
       </div>
   </div>
 </template>

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 大功告成！！！

完整代码：

 <template>
    <div style="width:600px;margin:100px auto">
        <div style="margin-bottom:10px" v-for="(item,index) in list" :key="index">
            <el-table
                :data="item.detailList"
                :ref="'tableRef'+index"
                highlight-current-row
                @row-click="getRow"
                style="width: 600">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
            </el-table>
        </div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
            list:[
                {
                    id:1,
                    detailList:[
                        {
                            date: '2016-05-02',
                            name: '狄仁杰',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-04',
                            name: '孙尚香',
                            address: '上海市普陀区金沙江路 1517 弄'
                        }, {
                            date: '2016-05-01',
                            name: '宫本',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '亚瑟',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }
                    ]
                },
                {
                    id:2,
                    detailList:[
                        {
                            date: '2016-05-02',
                            name: '蔡文姬',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-04',
                            name: '李白',
                            address: '上海市普陀区金沙江路 1517 弄'
                        }, {
                            date: '2016-05-01',
                            name: '孙悟空',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            date: '2016-05-03',
                            name: '貂蝉',
                            address: '上海市普陀区金沙江路 1516 弄'
                        }
                    ]
                }
            ]
        }
      },
        methods:{
            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);
            }
        }
    }
  </script>

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