效果图
html部分代码
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName" 此处为子元素class函数,返回类名
>
数据格式(随便写的不要在意名字)
tableData: [
{
Name: "教学管理",
Task: "教学",
Class: "ssh",
Time: "系统文件",
},
js代码
循环数组匹配到就返回类名为vi,请不要使用forEach循环 numIndex当前搜索出来的数据索引数组
tableRowClassName({ row, rowIndex }) {
循环数组匹配到就返回类名为vi,请不要使用forEach循环
for (const el in this.numIndex) {
if (
rowIndex == this.numIndex[el] &&
this.numIndex[el] !== 0 &&
rowIndex !== 0
) {
return "vi";
}
}
},
this.queryParams.Keyword为搜索输入框绑定数据
mySearch() {
判断搜索数据为空则不做任何操作
if (this.queryParams.Keyword.length <= 0) {
this.numIndex = [];
return;
}
numIndex当前搜索出来的数据索引数组
this.numIndex = [];
this.tableData.forEach((el, i) => {
if (el.Name.indexOf(this.queryParams.Keyword) !== -1) {
this.numIndex.push(i);
}
});
},
css代码
请务必带上/deep/样式穿透
/deep/ .vi {
color: red;
}
结束语
想要他自己移动可以用 scrollTo(0, 800)