vue3使用el-table实现新旧数据对比的代码详解

 更新时间:2023年12月03日 10:17:42   作者:许个愿~  
这篇文章主要为大家详细介绍了在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新旧数据对比的资料请关注脚本之家其它相关文章!

相关文章

  • 使用vue3实现一个人喵交流小程序

    使用vue3实现一个人喵交流小程序

    Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,下面这篇文章主要给大家介绍了关于如何使用vue3实现一个人喵交流小程序的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue数据双向绑定原理解析(get & set)

    vue数据双向绑定原理解析(get & set)

    这篇文章主要为大家详细解析了vue.js数据双向绑定原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue中根据时间戳判断对应的时间(今天 昨天 前天)

    vue中根据时间戳判断对应的时间(今天 昨天 前天)

    这篇文章主要介绍了vue中 根据时间戳 判断对应的时间(今天 昨天 前天),需要的朋友可以参考下
    2019-12-12
  • ssm+vue前后端分离框架整合实现(附源码)

    ssm+vue前后端分离框架整合实现(附源码)

    这篇文章主要介绍了ssm+vue前后端分离框架整合实现(附源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue项目报错:Uncaught SyntaxError: Unexpected token '<'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '<&a

    最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后就报了这个问题,这篇文章主要给大家介绍了关于Vue项目报错:Uncaught SyntaxError: Unexpected token '<'的解决方法,需要的朋友可以参考下
    2022-08-08
  • 深入Vue-Router路由嵌套理解

    深入Vue-Router路由嵌套理解

    这篇文章主要介绍了深入Vue-Router路由嵌套理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用VUE+iView+.Net Core上传图片的方法示例

    使用VUE+iView+.Net Core上传图片的方法示例

    这篇文章主要介绍了使用VUE+iView+.Net Core上传图片的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue编写的功能强大的swagger-ui页面及使用方式

    vue编写的功能强大的swagger-ui页面及使用方式

    swagger是一种标准的数据格式的定义,对于不同语言进行实现一些注解API式的东西,能快速生成这种描述restful格式的api信息的json串,本文给大家详细介绍vue编写的功能强大的swagger-ui页面,感兴趣的朋友跟随小编一起看看吧
    2022-02-02
  • vue:内存泄露详解

    vue:内存泄露详解

    这篇文章主要介绍了一个Vue的内存泄露详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • 教你用vue实现一个有趣的围绕圆弧动画效果

    教你用vue实现一个有趣的围绕圆弧动画效果

    最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论