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>