warewms-PDA/pages/new_file.vue

<template>
  <div>
    <div v-for="row in 10" class="row" :key="row">
      <div
        v-for="col in 10"
        class="col"
        :key="col"
        :class="{ marked: isMarked(row, col) }">
        {{ row }} - {{ col }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markedPoints: [
        { row: 2, col: 3 },
        { row: 5, col: 7 },
        // 添加其他标记点的坐标
      ],
    };
  },
  methods: {
    isMarked(row, col) {
      return this.markedPoints.some(
        (point) => point.row === row && point.col === col
      );
    },
  },
};
</script>

<style>
/* 添加样式来区分标记点 */
.marked {
  background-color: red;
}
.row {
  display: flex;
}
.col {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>