前端vue11.24工作总结

今日做一个搜索功能，下面是一个多页的数据表格，需要搜索到的数据跳转到指定的页码 并且让该数据有高亮效果，这个功能其实很简单，只需要逻辑清楚基本就没什么问题，我就属于那种逻辑有点差的，想了一天半才做出来，好，接下来话不多说上公式!!!

模糊搜索不用多说了吧根据后端接口传参拿到数据以后查看当前数据是第几个，比如说我要搜索的数据是第12个，那么就用这个12除以条数(每页几条，一般用size代替，size：10)这里划重点，因为是第12条数据显然已经不在第一页了，我们要在此处加Math.ceil（），用这个方法帮我们取整，这样的话我们得到的是在第2页，这时让当前页等于这个值就OK了 Math.ceil（条数/this.size）这样就完成了跳转效果，至于高亮效果,这里我们采用饿了么的官网

<template>
    <el-table :data="tableData" style="width: 100%"
    :row-class-name="tableRowClassName"> 
        <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> 
</template>

这里我们注意row-class-name这个方法

methods: {
tableRowClassName({row, rowIndex}){
    if (rowIndex === 1) { 
        return 'warning-row';
    } else if (rowIndex === 3) {
        return 'success-row';
    } 
    return '';
    }
},

这样就可以了如果有硬性条件可以在这个方法里面判断。

好，今天就到这里，下课！