vue3使用el-table实现新旧数据对比的代码详解
作者:许个愿~
这篇文章主要为大家详细介绍了在vue3中使用el-table实现新旧数据对比,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以参考一下
效果图(不同数据用红色字体标出)
直接上代码
<template> <el-dialog v-model="dialogVisible" title="数据对比" width="40%" :before-close="handleClose"> <div class="c-table"> <el-table :data="tableDataRecords" border max-height="700px"> <el-table-column width="160px" prop="type" label=""></el-table-column> <el-table-column prop="column1" :label="name.name1"> </el-table-column> <el-table-column prop="column2" :label="name.name2"> <template #default="scope"> <div v-if="scope.row.column1 == scope.row.column2">{{ scope.row.column2 }}</div> <div style="color: red" v-else>{{ scope.row.column2 }}</div> </template> </el-table-column> <template #empty> <img src="@/assets/images/common/no-data.png" alt="" width="179" /> </template> </el-table> </div> </el-dialog> </template> <script setup> import { ref } from 'vue' const name = { name1: '旧数据', name2: '新数据' } const obj1 = ref() const obj2 = ref() const obj3 = ref() const objChange = () => { console.log(obj1.value, obj2.value, obj3.value) for (const key in obj3.value) { if (obj3.value.hasOwnProperty(key)) { const record = { type: obj3.value[key] ?? '--', column1: obj2.value[key] ?? '--', column2: obj1.value[key] ?? '--' } tableDataRecords.value.push(record) } } } const tableDataRecords = ref([]) // 打开弹出层 const dialogVisible = ref(false) const compBtn = async (row, fileds) => { tableDataRecords.value = [] dialogVisible.value = true obj1.value = { a: '1', b: '2', c: '3' } obj2.value = { a: '1', b: '2', c: '4' } obj3.value = { a: '数据1', b: '数据2', c: '数据3' } objChange() } defineExpose({ compBtn }) </script> <style lang="scss" scoped></style>
以上就是vue3使用el-table实现新旧数据对比的代码详解的详细内容,更多关于vue3 el-table新旧数据对比的资料请关注脚本之家其它相关文章!