在项目中,难免会遇到一个页面会展示多个表格,下面以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>

效果如下:

table如何循环生成数据java_高亮


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

  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>
  1. 设置点击事件,@row-click用来处理高亮的,点击输出refs,效果如下:
  2. 使用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);
       }

效果如下:

table如何循环生成数据java_vue table_02


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的应用,这个只是一个简单的例子,在实际项目中的数据结构可能要复杂的多。