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

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++) {//若在数组中存在相同的值，则返回trueif (_.some(uniqueRows, { worker: this.dataArray[i].worker })) {this.dataArray[i].duplica = true}//若不存在，则将此数据压栈else {this.dataArray[i].duplica = falseuniqueRows.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方法。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！