likes
comments
collection
share

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字

作者站长头像
站长
· 阅读数 18

前言

最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字高亮的效果,在拿到这个设计图的时候,就在想应该用什么来实现,由于我所在的项目用的是vue3 + element,所以我第一时间想到的就是饿了么里面的表格组件,但是经过一番调式之后,发现在饿了么表格的基础上想要调整我要的样式效果太复杂太麻烦了,所以我决定用原生的div循环来实现!

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字

第一步 初步渲染表格

由于表格的表头是固定的,我们可以先渲染出来

<script setup lang="ts">

const tableFileds = Array.from({ length: 31 }, (_, i) =>
  String(i + 1).padStart(2, '0')
)
</script>
<template>
  <div class="table">
    <div class="tabble-box">
      <div class="table-node">
        <div class="table-item table-header">
          <div class="table-item-content diagonal-cell">
            <span class="top-content">日</span>
            <span class="bottom-content">月</span>
          </div>
          <div
            class="table-item-content"
            v-for="(item, _index) in tableFileds"
            :key="item"
            :style="{
              background: '#EFF5FF'
            }"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.table {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 1.8519vh 0.83vw 2.1296vh 1.09vw;
  .tabble-box {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    color: #666666;
    .table-node {
      display: flex;
      flex-direction: column;
      flex: 1;

      .table-header {
        .table-item-content {
          background-color: #eff5ff;
        }
        .diagonal-cell {
          position: relative; /* 使伪元素相对于此单元格定位 */
          padding-bottom: 8px; /* 为对角线下方留出空间以显示内容 */
          width: 4.64vw !important;
          &::before {
            content: ''; /* 必须有内容才能显示伪元素 */
            position: absolute;
            top: 0;
            left: 1px;
            width: 5.16vw;
            right: 0;
            height: 1px; /* 对角线的高度 */
            background-color: #e8e8e8; /* 对角线的颜色，可自定义 */
            transform-origin: top left;
            transform: rotate(30.5deg); /* 斜切角度，可微调 */
          }
          .top-content {
            position: absolute;
            top: 0.2778vh;
            left: 2.67vw;
            font-size: 0.83vw;
          }
          .bottom-content {
            position: absolute;
            top: 2.2222vh;
            left: 0.83vw;
            font-size: 0.83vw;
          }
        }
      }
      .table-item {
        display: flex;
        .table-item-content:first-child {
          width: 4.64vw;
          padding-top: 1.9444vh;
          padding-bottom: 1.2037vh;
        }
        .table-item-content {
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          // width: calc((100% - 9.53vw) / 15);
          padding: 0.1vw;
          text-align: center;
          font-size: 0.78vw;
          border-top: 0.05vw solid #eeeeee;
          border-right: 0.05vw solid #eeeeee;
          width: 2.48vw;
          // flex-grow: 1
        }
      }

      .table-header {
        .table-item-content {
          padding-top: 1.9444vh;
          padding-bottom: 1.5741vh;
        }
      }
    }
  }
}

看一下页面效果:

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字 表格的表头初步完成!

第二步 确认接口返回的数据格式

这是接口返回的格式数据 就例如第一个对象代表着3月9号有数据

{
    "3": {
        "9": 1
    },
    "4": {
        "12": 2
    },
    "5": {
        "11": 1,
        "12": 2,
        "21": 1
    },
    "6": {
        "6": 5,
        "8": 1,
        "9": 2,
        "10": 1,
        "12": 2,
        "17": 1,
        "20": 1
    },
    "7": {
        "1": 8,
        "4": 1,
        "7": 1,
        "6": 1,
        "13": 1,
        "22": 1,
        "25": 1,
        "26": 1,
        "27": 1,
        "29": 6,
        "30": 1
    },
    "8": {
        "1": 1,
        "2": 2,
        "7": 1,
        "20": 1,
        "24": 1,
        "27": 1,
        "31": 1
    },
    "9": {
        "15": 1,
        "17": 9,
        "21": 2
    },
    "10": {
        "23": 1
    }
}

接着我们需要对返回的数据做处理,由于表格的表头已经渲染出来,这意味着表格的每一列都有了,接下来我们就需要渲染表格的每一行与其对应就可以了.十二个月份我们需要十二行,同时每一行的第一个单元格表示的是月份,那我们可以定义一个月份的数据,然后再根据接口数据做处理,返回一个带有对应月份数据的数组. 代码如下:

const tableDataList = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
]
// 把接口数据转换为对应的月份数组对象
const parseData = (data: any) => {
  const parsedData = new Array(12).fill({}) // 初始化一个包含12个空对象的数组
  console.log('parsedData', parsedData)

  for (let month = 1; month <= 12; month++) {
    // 确保每次循环创建一个新的空对象
    parsedData[month - 1] = {} // 从0开始索引
    if (data[month]) {
      Object.entries(data[month]).forEach(([day, value]) => {
        parsedData[month - 1][parseInt(day)] = value
      })
    }
  }
  return parsedData
}

const tableData = ref<any[]>([])

onMounted(() => {
  tableData.value = parseData(data)
  console.log('tableData.value', tableData.value)
})

我们可以看一下控制台,此时的tableData的数据格式是怎么样的

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字 接下来就可以开始渲染表格的内容了,给有数据的单元格做个高亮,同时固定31天,所以可以先遍历出每一行31个单元格出来

  <div class="table-list">
          <div
            class="table-item"
            v-for="(item, rowIndex) in tableData"
            :key="item"
          >
            <div
              class="table-item-content"
              :key="item"
              :style="{
                background: '#EFF5FF'
              }"
            >
              {{ tableDataList[rowIndex] }}
            </div>
            <div
              class="table-item-content"
              :data-col-index="index"
              v-for="index in 31"
              :key="rowIndex"
              :style="{
                background: item[index] ? '#6fa7ea' : ''
              }"
            >
              <span v-if="item[index]" style="color: #fff">
                {{ item[index] }}
              </span>
              <span v-else>0</span>
            </div>
          </div>
        </div>

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字

到这里基本就完成了,还差一个鼠标经过表格十字高亮的需求

我们可以给每个单元格加上鼠标的移入移出事件,移入事件函数传两个参数,一个就是行一个就是列,行可以从一开始的tableData那里拿到,列就是遍历31长度的当前项;这样子就可以拿到当前单元格的坐标,再封装一个辅助函数进行判断是否为当前单元格所在的行所在的列就可以了 高亮的时候记住判断的样式需要在之前的有数据高亮的样式的后面,这样子就不会被覆盖,可以保证有数据高亮的样式会一直存在,哪怕鼠标经过也不会被覆盖!

// 表格十字高亮
const highlightedRow = ref<any>()
const highlightedColumn = ref<any>()

const isCurrentCellHighlighted = (rowIndex: number, columnIndex: number) => {
  return (
    (highlightedRow.value !== null && highlightedRow.value === rowIndex) ||
    (highlightedColumn.value !== null &&
      highlightedColumn.value === columnIndex)
  )
}
//鼠标移入
const onCellMouseOver = (rowIndex: any, columnIndex: any) => {
  console.log('坐标', rowIndex, columnIndex)

  highlightedRow.value = rowIndex
  highlightedColumn.value = columnIndex
}

// 在鼠标移出事件（onCellMouseLeave）触发时，恢复所有单元格的原始背景色
const onCellMouseLeave = () => {
  highlightedRow.value = null
  highlightedColumn.value = null
}
<div
              class="table-item-content"
              :data-col-index="index"
              v-for="index in 31"
              :key="rowIndex"
               :style="{
                background: item[index]
                  ? '#6fa7ea'
                  : isCurrentCellHighlighted(rowIndex + 1, index)
                    ? '#EFF5FF'
                    : ''
              }"
              @mouseover="onCellMouseOver(rowIndex + 1, index)"
              @mouseout="onCellMouseLeave"
            >
              <span v-if="item[index]" style="color: #fff">
                {{ item[index] }}
              </span>
              <span v-else>0</span>
            </div>

最终的效果就是:

日历表格的制作,我竟然选择了这样子来实现...前言 最近有个日历表格的需求,具体效果如下所示,鼠标经过时表格还有一个十字

以下就是完整的代码:

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const tableFileds = Array.from({ length: 31 }, (_, i) =>
  String(i + 1).padStart(2, '0')
)
const tableDataList = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
]

const parseData = (data: any) => {
  const parsedData = new Array(12).fill({}) // 初始化一个包含12个空对象的数组
  console.log('parsedData', parsedData)

  for (let month = 1; month <= 12; month++) {
    // 确保每次循环创建一个新的空对象
    parsedData[month - 1] = {} // 从0开始索引
    if (data[month]) {
      Object.entries(data[month]).forEach(([day, value]) => {
        parsedData[month - 1][parseInt(day)] = value
      })
    }
  }
  return parsedData
}
const data = {
  '3': {
    '9': 1
  },
  '4': {
    '12': 2
  },
  '5': {
    '11': 1,
    '12': 2,
    '21': 1
  },
  '6': {
    '6': 5,
    '8': 1,
    '9': 2,
    '10': 1,
    '12': 2,
    '17': 1,
    '20': 1
  },
  '7': {
    '1': 8,
    '4': 1,
    '7': 1,
    '6': 1,
    '13': 1,
    '22': 1,
    '25': 1,
    '26': 1,
    '27': 1,
    '29': 6,
    '30': 1
  },
  '8': {
    '1': 1,
    '2': 2,
    '7': 1,
    '20': 1,
    '24': 1,
    '27': 1,
    '31': 1
  },
  '9': {
    '15': 1,
    '17': 9,
    '21': 2
  },
  '10': {
    '23': 1
  }
}
const tableData = ref<any[]>([])
// 表格十字高亮
const highlightedRow = ref<any>()
const highlightedColumn = ref<any>()

const isCurrentCellHighlighted = (rowIndex: number, columnIndex: number) => {
  return (
    (highlightedRow.value !== null && highlightedRow.value === rowIndex) ||
    (highlightedColumn.value !== null &&
      highlightedColumn.value === columnIndex)
  )
}
const onCellMouseOver = (rowIndex: any, columnIndex: any) => {
  console.log('坐标', rowIndex, columnIndex)

  highlightedRow.value = rowIndex
  highlightedColumn.value = columnIndex
}

// 在鼠标移出事件（onCellMouseLeave）触发时，恢复所有单元格的原始背景色
const onCellMouseLeave = () => {
  highlightedRow.value = null
  highlightedColumn.value = null
}
onMounted(() => {
  tableData.value = parseData(data)
  console.log('tableData.value', tableData.value)
})
</script>
<template>
  <div class="table">
    <div class="tabble-box">
      <div class="table-node">
        <div class="table-item table-header">
          <div class="table-item-content diagonal-cell">
            <span class="top-content">日</span>
            <span class="bottom-content">月</span>
          </div>
          <div
            class="table-item-content"
            v-for="(item, _index) in tableFileds"
            :key="item"
            :style="{
              background: '#EFF5FF'
            }"
          >
            {{ item }}
          </div>
        </div>
        <div class="table-list">
          <div
            class="table-item"
            v-for="(item, rowIndex) in tableData"
            :key="item"
          >
            <div
              class="table-item-content"
              :key="item"
              :style="{
                background: '#EFF5FF'
              }"
            >
              {{ tableDataList[rowIndex] }}
            </div>
            <div
              class="table-item-content"
              :data-col-index="index"
              v-for="index in 31"
              :key="rowIndex"
              :style="{
                background: item[index]
                  ? '#6fa7ea'
                  : isCurrentCellHighlighted(rowIndex + 1, index)
                    ? '#EFF5FF'
                    : ''
              }"
              @mouseover="onCellMouseOver(rowIndex + 1, index)"
              @mouseout="onCellMouseLeave"
            >
              <span v-if="item[index]" style="color: #fff">
                {{ item[index] }}
              </span>
              <span v-else>0</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.table {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 1.8519vh 0.83vw 2.1296vh 1.09vw;
  .tabble-box {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    color: #666666;
    .table-node {
      display: flex;
      flex-direction: column;
      flex: 1;

      .table-header {
        .table-item-content {
          background-color: #eff5ff;
        }
        .diagonal-cell {
          position: relative; /* 使伪元素相对于此单元格定位 */
          padding-bottom: 8px; /* 为对角线下方留出空间以显示内容 */
          width: 4.64vw !important;
          &::before {
            content: ''; /* 必须有内容才能显示伪元素 */
            position: absolute;
            top: 0;
            left: 1px;
            width: 5.16vw;
            right: 0;
            height: 1px; /* 对角线的高度 */
            background-color: #e8e8e8; /* 对角线的颜色，可自定义 */
            transform-origin: top left;
            transform: rotate(30.5deg); /* 斜切角度，可微调 */
          }
          .top-content {
            position: absolute;
            top: 0.2778vh;
            left: 2.67vw;
            font-size: 0.83vw;
          }
          .bottom-content {
            position: absolute;
            top: 2.2222vh;
            left: 0.83vw;
            font-size: 0.83vw;
          }
        }
      }
      .table-item {
        display: flex;
        .table-item-content:first-child {
          width: 4.64vw;
          padding-top: 1.9444vh;
          padding-bottom: 1.2037vh;
        }
        .table-item-content {
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          // width: calc((100% - 9.53vw) / 15);
          padding: 0.1vw;
          text-align: center;
          font-size: 0.78vw;
          border-top: 0.05vw solid #eeeeee;
          border-right: 0.05vw solid #eeeeee;
          width: 2.48vw;
          // flex-grow: 1
        }
      }

      .table-header {
        .table-item-content {
          padding-top: 1.9444vh;
          padding-bottom: 1.5741vh;
        }
      }
    }
  }
}
</style>

如果对你有帮助的话,欢迎点赞留言收藏🌹

转载自:https://juejin.cn/post/7413311432971141160
评论
请登录