element-ui筛选重复行并对其进行标记

前面的话

最近在做项目的时候，改了跟另一个系统之间的接口，所以导致获取到的数据非常多，并且有一部分数据中某些列是重复的，但是为了安全起见，不能将之删除，所以需要对重复行进行标记。
对于前端工程师来说，Vue和element-ui必须了解一下，有时间可以去看看lodash，这里面的方法特别好用，我做的时候也用到了。

代码展示

话不多说，直接上代码，代码是我简化过的，数据都是静态的，如果要绑定动态数组，在ajax里面操作即可。另外依赖包我都封装在全局，这里看不到，需要使用的时候需要自己导入依赖包。

<div id="app" v-loading="loading">
    <el-table  :data="dataArray" :row-class-name="pendingRowClassName">       
        <el-table-column prop="worker" label="操作者" width="100" sortable></el-table-column>       
    </el-table>
</div>
<style>
    .el-table .ducplica-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                loading: false,
                dataArray: [
                    { worker: 'zzl' },
                    { worker: 'zzl' },
                    { worker: 'aaa' },
                ],

            }
            
        },
        methods: {
            duplicateRow() {
                //此方法只要循环一次，时间复杂度为O(n)
                let uniqueRows = [] //将需要筛选的字段存入数组
                for (var i = 0; i < this.dataArray.length; i++) {
                    //若在数组中存在相同的值，则返回true
                    if (_.some(uniqueRows, { worker: this.dataArray[i].worker })) {
                        this.dataArray[i].duplica = true
                    }
                    //若不存在，则将此数据压栈
                    else {
                        this.dataArray[i].duplica = false
                        uniqueRows.push({ worker: this.dataArray[i].worker })
                    }
                }
            },
            //去掉{}就不能显示效果了，不知道为什么
            pendingRowClassName({row, rowIndex }) {
                //自动根据行数进行刷新，不需要添加for循环  
                console.log(row.duplica)
                if (row.duplica) {
                    return 'ducplica-row';
                }
                else {
                    return '';
                }                       
            },
        },
        created() {
            this.duplicateRow()
        }
    });
</script>

效果

要知道row-class-name绑定的是一个回调函数，只要页面在渲染，它就会自动执行，可以看到控制台一直在执行，所以底层就有一个for循环遍历，内部就不需要写for遍历数组了。然后duplica一开始是没有在数组中定义的，不需要新建，只需要用就行，它内部会自动把你用的push进数组。总之，里面细节很多，慢慢参悟吧。

最后的话

参阅了很多博主的文章，都没有涉及到这一块，几乎都是静态的给某行绑定class，这个做到了根据数组中某一项的true or false 进行class的增加，做到了动态绑定。希望对大家有帮助。另外如果需要直接将重复行删除的话，可以试试使用lodash中的_.uniqBy方法。