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

前言

在数据分析和数据处理的过程中，经常需要对比两个数据集，以便发现其中的差异和变化。本文将介绍如何使用 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>

实现效果

---

相关推荐

⭐ 微信小程序开发实战：利用差异对比显示对象属性变化
⭐ element中el-table根据状态改变样式，你不能错过的技能