对比两个el-table，差异数据突显标记

原创 2025-03-08 11:29:20 2.5k 阅读 AI写同款

收录于

element

水星记_

码龄6年墨衍会员 · AI 创作全网分发

13万+粉丝212篇原创

关注

基于ESP32的智能车载环境监测系统开发随着智能汽车技术的飞速发展，车载系统的功能越来越多样化，除了基本的行驶控制和娱乐功能外，车载环境监测系统也成为了一项重要的功能。通过实时监测车内环境数据，例如温度、湿度、空气质量、气体浓度等，智能车载环境监测系统能够提供更为舒适和安全的驾驶体验，同时增强车辆的智能化程度，提升用户的整体体验。ESP32作为一种集成了Wi-Fi和蓝牙功能的高效能低功耗嵌入式开发平台，成为了设计车载环境监测系统的理想选择。它不仅具备丰富的接口和处理能力，还能够实现与云平台、手机应用等系统的远程数据传输和控制。阅读详情

AI摘要

本文聚焦数据分析中对比两个数据集的需求，介绍使用el-table组件实现该功能的方法。利用组件的cell-style属性自定义单元格样式，突显差异数据。还给出了核心代码逻辑，通过判断数据是否相等设置单元格文字颜色，最后展示了完整功能代码及实现效果。

前言

在数据分析和数据处理的过程中，经常需要对比两个数据集，以便发现其中的差异和变化。本文将介绍如何使用 el-table 组件来对比两个数据集，并通过差异数据的突显标记，帮助用户更直观地理解数据的变化。

cell-style 属性

其实利用 el-table 组件中的 cell-style 属性处理这个功能非常简单，它允许开发者通过提供对象或返回样式的函数来自定义每个单元格的样式，通过这个特性我们就可以很轻松的实现这个功能。

<el-table :data="productList.tableOne" :cell-style="getCellStyle('数据1', '数据2')"></el-table>

在这里插入图片描述

核心代码

getCellStyle(currentData, compareToData) {
  return ({ rowIndex, column }) => {
    const { property } = column;
    const currentValue = currentData[rowIndex]?.[property];
    const compareToValue = compareToData[rowIndex]?.[property];
    return currentValue !== compareToValue ? { color: "red" } : null;
  };
},

首先，在 getCellStyle 函数中会接受两个参数 currentData 和 compareToData。这个函数会返回一个回调函数，用于设置表格单元格的样式；
回调函数接受一个参数 { rowIndex, column }，其中 rowIndex 是当前行的索引，column 是当前列的信息。函数内部通过 column 获取到属性名 property；
然后，函数通过索引 rowIndex 和属性名 property 从 currentData 和 compareToData 中获取对应的值 currentValue 和 compareToValue；
最后，函数判断 currentValue 和 compareToValue 是否相等，如果不相等，则返回一个样式对象 { color: "red" }，表示将单元格的文字颜色设置为红色；如果相等，则返回 null，表示不设置样式。

实现效果

在这里插入图片描述

完整功能代码

index.vue

<template>
  <div>
    <el-button type="success" @click="version">版本对比</el-button>
    <div>
      <select-dialog
        :dialogChild.sync="selectDialog.dialogLsattr"
        :dialogRow="selectDialog.dialogRow"
      />
    </div>
  </div>
</template>
<script>
import selectDialog from "./components/selectDialog";
export default {
  components: {
    "select-dialog": selectDialog,
  },
  data() {
    return {
      selectDialog: {
        dialogRow: {},
        dialogLsattr: false,
      },
    };
  },
  methods: {
    version() {
      this.selectDialog.dialogLsattr = true;
    },
  },
};
</script>

components/selectDialog.vue

<template>
  <el-dialog
    title="版本选择"
    width="40%"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    @close="close"
  >
    <div class="selectCon">
      <div class="transfer">
        <div class="nav">
          <div class="title">
            <span>版本列表</span>
            <span>{{ count }}/{{ list.length }}</span>
          </div>
          <div class="search">
            <el-input
              v-model="searchVal"
              clearable
              prefix-icon="el-icon-search"
              placeholder="版本号"
              @input="searchVersions"
            ></el-input>
          </div>
        </div>
        <div class="checkboxs">
          <div
            v-for="(item, index) in searchVal ? searchResult : list"
            :key="index"
            @click="toggleCheckbox(item)"
          >
            <el-checkbox
              v-model="checked[item]"
              :disabled="count >= 2 && !checked[item]"
              @change="toggleCheckbox(item)"
              >{{ item }}</el-checkbox
            >
          </div>
          <el-empty
            v-if="!list.length || (searchVal && !searchResult.length)"
            description="暂无数据"
          ></el-empty>
        </div>
      </div>
      <div class="subBtn">
        <el-button type="primary" :disabled="count < 2" @click="submit"
          >对比</el-button
        >
        <el-button
          style="margin-left: 10px"
          @click="$emit('update:dialogChild', false)"
          >取消</el-button
        >
      </div>
    </div>
    <div>
      <details-drawer
        :drawerChild.sync="detailsDrawer.drawerLsattr"
        :drawerRow="detailsDrawer.drawerRow"
      />
    </div>
  </el-dialog>
</template>
<script>
import detailsDrawer from "./detailsDrawer";
export default {
  components: {
    "details-drawer": detailsDrawer,
  },
  props: {
    dialogChild: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    dialogRow: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      searchVal: "", //搜索值
      checked: {}, //选中的checkbox
      list: [
        "version1",
        "version2",
        "version3",
        "version4",
        "version5",
        "version6",
        "version7",
        "version8",
        "version9",
        "version10",
        "version11",
        "version12",
        "version13",
        "version14",
        "version15",
        "version16",
      ], //模拟全部数据列表
      searchResult: [], // 搜索结果列表
      dialogVisible: false, //弹框状态
      detailsDrawer: {
        //抽屉传递数据
        drawerRow: {},
        drawerLsattr: false,
      },
    };
  },
  computed: {
    // 动态计算当前选中的checkbox数量
    count: function () {
      return Object.values(this.checked).filter(Boolean).length;
    },
  },
  watch: {
    dialogChild: {
      handler(newName, oldName) {
        this.dialogVisible = newName;
        this.list.forEach((item) => {
          this.$set(this.checked, item, false);
        });
      },
      deep: true,
    },
    dialogRow: {
      handler(newName, oldName) {},
      deep: true,
    },
  },
  methods: {
    // 当前行切换复选框的选中状态
    toggleCheckbox(item) {
      if (!(this.count >= 2 && !this.checked[item])) {
        this.checked[item] = !this.checked[item];
      }
    },
    // 搜索
    searchVersions() {
      const keyword = this.searchVal.trim(); // 获取输入框的值并去除首尾空格
      if (keyword === "") {
        this.searchResult = [];
        return;
      }
      this.searchResult = this.list.filter((item) => item.includes(keyword));
      console.log("搜索结果：", this.searchResult);
    },
    // 对比
    submit() {
      console.log(this.checked);
      this.detailsDrawer.drawerLsattr = true;
    },
    // 关闭弹框
    close() {
      this.$emit("update:dialogChild", false);
      this.checked = {};
      this.searchVal = "";
      this.searchResult = [];
    },
  },
};
</script>
<style lang="less" scoped>
.selectCon {
  background-color: #fff;
  padding: 16px;
  .transfer {
    width: 100%;
    height: 50vh;
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid #ebeef5;
    .nav {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fff;
      .title {
        background: #f5f7fa;
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        span:nth-child(1) {
          font-weight: bold;
        }
        span:last-child {
          color: #909399;
        }
      }
      .search {
        padding: 10px 16px 0 16px;
        .el-input {
          width: 100%;
        }
      }
    }
    .checkboxs {
      padding: 10px 16px;
      div:hover {
        cursor: pointer;
        background: #f5f7fa;
      }
      .el-checkbox {
        margin: 3px 6px;
      }
      .el-checkbox:hover {
        color: #296bff;
      }
    }
  }
  .subBtn {
    margin-top: 16px;
    display: flex;
    justify-content: right;
  }
}
</style>

components/detailsDrawer.vue

<template>
  <el-drawer
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="100%"
    title="版本对比"
    @close="$emit('update:drawerChild', false)"
  >
    <div class="versionsCon">
      <h4>标题1</h4>
      <el-card class="box-card">
        <div class="itemContrast">
          <el-table :data="productList.tableOne" :cell-style="getCellStyle(productList.tableOne, productList.tableTwo)" border>
            <el-table-column prop="aaa" label="名称1"></el-table-column>
            <el-table-column prop="bbb" label="名称2"> </el-table-column>
            <el-table-column prop="ccc" label="名称3"></el-table-column>
          </el-table>
          <el-table :data="productList.tableTwo" :cell-style="getCellStyle(productList.tableOne, productList.tableTwo)" border>
            <el-table-column prop="aaa" label="名称1"></el-table-column>
            <el-table-column prop="bbb" label="名称2"> </el-table-column>
            <el-table-column prop="ccc" label="名称3"></el-table-column>
          </el-table>
        </div>
      </el-card>
      <h4>标题2</h4>
      <el-card class="box-card">
        <div class="itemContrast">
          <el-table :data="inventoryList.tableOne" :cell-style="getCellStyle(inventoryList.tableOne, inventoryList.tableTwo)" border>
            <el-table-column prop="aaa" label="名称1"></el-table-column>
            <el-table-column prop="bbb" label="名称2"> </el-table-column>
            <el-table-column prop="ccc" label="名称3"></el-table-column>
            <el-table-column prop="ddd" label="名称4"></el-table-column>
          </el-table>
          <el-table :data="inventoryList.tableTwo" :cell-style="getCellStyle(inventoryList.tableOne, inventoryList.tableTwo)" border>
            <el-table-column prop="aaa" label="名称1"></el-table-column>
            <el-table-column prop="bbb" label="名称2"> </el-table-column>
            <el-table-column prop="ccc" label="名称3"></el-table-column>
            <el-table-column prop="ddd" label="名称4"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: {
    drawerChild: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    drawerRow: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      drawerVisible: false, //抽屉状态
      productList: {
        tableOne: [
          {
            aaa: "2024",
            bbb: "描述",
            ccc: "abc",
          },
          {
            aaa: "2024",
            bbb: "描述",
            ccc: "abcd",
          },
        ],
        tableTwo: [
          {
            aaa: "2024",
            bbb: "描述xx",
            ccc: "abc",
          },
          {
            aaa: "2025",
            bbb: "描述",
            ccc: "abc",
          },
        ],
      },
      inventoryList: {
        tableOne: [
          {
            aaa: "2024",
            bbb: "描述",
            ccc: "abc",
            ddd: "",
          },
          {
            aaa: "2024",
            bbb: "描述",
            ccc: "abc",
            ddd: "^%$",
          },
        ],
        tableTwo: [
          {
            aaa: "2024",
            bbb: "描述",
            ccc: "abc",
            ddd: "*/-",
          },
        ],
      },
    };
  },
  watch: {
    drawerChild: {
      handler(newName, oldName) {
        this.drawerVisible = newName;
      },
      deep: true,
    },
    drawerRow: {
      handler(newName, oldName) {},
      deep: true,
    },
  },
  methods: {
    // 比较数据并返回颜色
    getCellStyle(currentData, compareToData) {
      return ({ rowIndex, column }) => {
        const { property } = column;
        const currentValue = currentData[rowIndex]?.[property];
        const compareToValue = compareToData[rowIndex]?.[property];
        return currentValue !== compareToValue ? { color: "red" } : null;
      };
    },
  },
};
</script>
<style lang="less" scoped>
.versionsCon {
  padding: 0px 36px;
  .itemContrast {
    display: flex;
    justify-content: space-between;
    .el-table:first-child {
      margin-right: 16px;
    }
  }
  .el-card {
    margin: 16px 0;
  }
}
::v-deep {
  .el-drawer__header > :first-child {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    display: flex;
    justify-content: center;
  }
  .el-drawer__header {
    margin-bottom: 16px;
  }
}
</style>