在vue3中使用el-table实现新旧数据对比

最新推荐文章于 2025-03-28 16:14:55 发布

许个愿~

最新推荐文章于 2025-03-28 16:14:55 发布

阅读量1.7k

点赞数 13

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_65377849/article/details/134462876

版权

文章描述了如何使用Vue.js构建一个带有弹出对话框的数据对比表格，展示了旧数据和新数据的差异，通过`el-dialog`组件展示并更新`tableDataRecords`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图(不同数据用红色字体标出)

直接上代码

<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>