@TOC
在项目中，难免会遇到一个页面会展示多个表格，下面以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>
效果如下：
在这里插入图片描述
此时你会看到两个表格都会有高亮显示，那么要怎样才能只显示当前表格的当前行呢？
- 设置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>
-
设置点击事件，@row-click用来处理高亮的，点击输出refs，效果如下：
在这里插入图片描述
- 使用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渲染缓慢，欢迎各位大神发表言论，解决瓶颈，提供优化方案，谢谢大家！！！
网友评论