JavaScript如何用el-table实现绘制热度表

本篇内容介绍了“javascript如何用el-table实现绘制热度表”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

实现效果

实现代码

<div class="gray w-full h-100 mt-4 table" v-if="props.brandId">          <el-table :data="brandHotList" :header-cell-style="{            'font-weight': 'nORMal',            'background-color': '#f7f8f9',          }" :cell- :row- fit class="shoWorder">            <el-table-column align="center" label="排名" width="55">              <template #default="scope">                <span class="index">{{ scope.$index + 1 }}</span>              </template>            </el-table-column>            <el-table-column align="left" label="热门车系">              <template #default="scope">              <el-tooltip effect="dark" :content="scope.row.name || '--'" placement="top">                <div class="lastName">{{ scope.row.name || '--'}}</div>              </el-tooltip>              </template>            </el-table-column>            <el-table-column align="center" label="热度" min-width="200">              <template #default="scope">                <div class="lastDiv" :style="                  scope.row.total >= 0                    ? 'text-align:left'                    : 'text-align:center'                " >                  <span v-if="scope.row.total > 0" :style="`width:${(scope.row.total / brandHotList[0].total) * 83 + 0.5                  }%;background:#ff454e`" class="length"></span>                  <span class="count">{{ scope.row.total }}</span>                </div>              </template>            </el-table-column>          </el-table>        </div>

<style>.gray {  background-color: #f7f8f9;  border-radius: 8px;}.table {  width: 100%;  overflow: hidden;  padding: 0 20px;  .el-table {    width: 100%;    border: none;    background-color: #f7f8f9;    margin: 0;    padding: 0;    overflow: hidden;    :deep(.el-table__empty-block) {      background-color: #f7f8f9;      margin-top: 105px;    }    :deep(.el-table__body) {      td {        border-bottom: none;        font-size: 14px;      }    }    ::before {      height: 0;    }  }  :deep(.index){      font-family: DIN, DIN-Bold;      font-weight: 700;       color: #333333;    }  .length {    display: inline-block;    width: 80%;    height: 12px;    margin-right: 14px;  }  .lastDiv {    display: block !important;  }  .count {    white-space: nowrap;    line-height: 12px;  }  .hot {    display: flex;    align-items: center;    .num {      margin-left: 5px;      text-align: center;    }  }  :deep(.groupName) {    overflow: hidden;    text-overflow: ellipsis;    display: -WEBkit-box;    -webkit-line-clamp: 1;    -webkit-box-orient: vertical;  }  :deep(.el-table__header-wrapper) {    margin-bottom: 12px;    background-color: #f7f8f9;  }  :deep(th .cell) {    font-size: 14px;    font-weight: 400;    color: #333;  }  :deep(.el-table th) {    background-color: #f7f8f9 !important;  }  :deep(.el-table__row) {    background-color: #f7f8f9;  }}</style>

补充

除了绘制热度表，还可以绘制甘特图哦，下面就是示例代码

<template>  <div class="hotelApply wl-gantt">    <el-card>      <el-table :data="tableData" border  :class="dateTypeClass" row-key="id"        :span-method="spanMethod" @cell-click="cellClick" :cell->        <el-table-column prop="room" label="房间" align="center" width="140px" fixed="left" :show-overflow-tooltip="true">        </el-table-column>        <el-table-column prop="bedName" label="床位" align="center" width="120px" fixed="left"          :show-overflow-tooltip="true">        </el-table-column>        <!-- mouth and day gantt -->        <template v-if="self_date_type === 'monthAndDay'">          <el-table-column :resizable="false" v-for="month in ganttTitleDate" :label="month.full_date" :key="month.id"            align="center">            <el-table-column class-name="wl-gantt-item" v-for="(day, dindex) in month.children" :resizable="false"              :key="dindex" :label="day.name" width="60" align="center">              <template v-slot="scope">                <div :class="dayGanttType(scope.row, day.full_date)" @click="handleDay(scope.row)"></div>                <div :class="realDayGanttType(scope.row, day.full_date)"></div>                <!-- <div :class="selectedCell(scope.row)"></div> -->              </template>            </el-table-column>          </el-table-column>        </template>      </el-table>    </el-card>    <!-- 右边抽屉 -->    <el-drawer title="住房信息" :visible.sync="showDrawer" size='40%'>      <div class="drawer_box">        <el-form :model="drawerForm" :inline="true" label-width="100px">          <el-form-item label="入住时间">            <el-date-picker v-model="drawerForm.beginTime" type="date" placeholder="选择日期" value-format='yyyy-MM-dd'              disabled>            </el-date-picker>          </el-form-item>          <el-form-item label="退住时间">            <el-date-picker v-model="drawerForm.endTime" type="date" placeholder="选择日期" value-format='yyyy-MM-dd'>            </el-date-picker>          </el-form-item>        </el-form>        <div >          <el-button type="primary" size="mini" @click="drawerConfirm"> 确定</el-button>        </div>      </div>    </el-drawer>  </div></template><script>import dayjs from "dayjs" // 导入日期jsconst uuidv4 = require("uuid/v4") // 导入uuid生成插件import isBetween from "dayjs/plugin/isBetween"import quarterOfYear from "dayjs/plugin/quarterOfYear"dayjs.extend(quarterOfYear) //获取季度依赖dayjs.extend(isBetween)export default {  name: "",  data() {    return {      tableData: [        {          id: 1,          room: "公寓101",          bedName: "1号床",          beginTime: "2021-08-03",          endTime: "2021-08-4",          liveList: [            { beginTime: "2021-08-03", endTime: "2021-08-4" },            { beginTime: "2021-08-06", endTime: "2021-08-8" },          ],        },        {          id: 2,          room: "公寓101",          bedName: "2号床",          beginTime: "2021-08-04 00:00:00",          endTime: "2021-08-5 00:00:00",          liveList: [],        },        {          id: 3,          room: "公寓102",          bedName: "1号床",          beginTime: "2021-08-05 00:00:00",          endTime: "2021-08-7 00:00:00",          liveList: [],        },        {          id: 4,          room: "公寓102",          bedName: "2号床",          beginTime: "2021-08-01 00:00:00",          endTime: "2021-08-3 00:00:00",          liveList: [],        },        {          id: 5,          room: "公寓103",          bedName: "1号床",          beginTime: "2021-08-06 00:00:00",          endTime: "2021-08-8 00:00:00",          liveList: [],        },        {          id: 6,          room: "公寓103",          bedName: "2号床",          beginTime: "2021-08-7 00:00:00",          endTime: "2021-08-9 00:00:00",          liveList: [],        },      ],      showDrawer: false, //抽屉      drawerForm: {},      // 甘特图      self_start_date: "2021-08-01", // 项目开始时间      self_end_date: "2021-09-30", // 项目结束时间      self_start_date_day: "", //项目开始时间的日期      self_start_date_month: "", //项目开始时间的月份      self_start_date_year: "", //项目开始时间的年份      self_date_type: "monthAndDay", // 自身日期类型    }  },  created() {},  mounted() {    this.initTime() //初始化时间1  },  computed: {    // 甘特图标题日期分配    ganttTitleDate() {      // 分解开始和结束日期      let start_date_spilt = dayjs(this.self_start_date)        .format("YYYY-M-D")        .split("-")      let end_date_spilt = dayjs(this.self_end_date)        .format("YYYY-M-D")        .split("-")      let start_year = Number(start_date_spilt[0])      let start_mouth = Number(start_date_spilt[1])      let end_year = Number(end_date_spilt[0])      let end_mouth = Number(end_date_spilt[1])      console.log("日期类型", this.self_date_type)      if (this.self_date_type === "monthAndDay") {        return this.mouthAndDayTitleDate(          start_year,          start_mouth,          end_year,          end_mouth        )      }    },    // 树表配置项    selfProps() {      return {        hasChildren: "hasChildren", // 字段来指定哪些行是包含子节点        children: "children", // children字段来表示有子节点        name: "name", // 任务名称字段        id: "id", // id字段        pid: "pid", // pid字段        startDate: "beginTime", // 开始时间字段        endDate: "endTime", // 结束时间字段        realStartDate: "recordBeginTime", // 实际开始时间字段        realEndDate: "recordEndTime", // 实际结束时间字段        identityId: "identityId",        parents: "parents",        pre: "pre", // 前置任务字段【注意：如果使用recordParents，则pre值应是目标对象的identityId字段(可配置)】        // ...this.props      }    },    // 根据日期类型改样式    dateTypeClass() {      if (this.self_date_type === "monthAndDay") {        return "month-and-day"      }      return ""    },  },  components: {},  methods: {    // =====================表格事件==================    // 单元格点击    cellClick(row, column, cell, event) {      // console.log(row, column, cell, event);    },    // 单元格样式    cellStyle({ row, column, rowIndex, columnIndex }) {},    // 预定者点击    handleDay(row) {      console.log(row)      this.showDrawer = true      this.drawerForm = Object.assign({}, row)    },    // 模态框确定    drawerConfirm() {      this.tableData.forEach((item) => {        if (item.id == this.drawerForm.id) {          this.$set(item, "beginTime", this.drawerForm.beginTime)          this.$set(item, "endTime", this.drawerForm.endTime)        }      })      this.showDrawer = false    },    // =====================甘特区域==================    //维度展示形式    changedateType(val) {      console.log(val)      this.getDataList()    },    reload() {      this.isRouterAlive = false      this.$nextTick(() => (this.isRouterAlive = true))    },    // 初始化时间    initTime() {      this.self_start_date_year = this.self_start_date.split("-")[0]      this.self_start_date_month = this.self_start_date.split("-")[1]      this.self_start_date_day = this.self_start_date.split("-")[2]      this.self_start_date_day =        this.self_start_date_day > 2          ? this.self_start_date_day - 1          : this.self_start_date_day      console.log("开始-结束", this.self_start_date, this.self_end_date)    },    // 设置dateType    setDataType(type) {      this.self_date_type = type    },        dayGanttType(row, date, unit = "days") {      // let start_date = row[this.selfProps.startDate]      // let end_date = row[this.selfProps.endDate]      let start_date = row[this.selfProps.startDate]      let end_date = row[this.selfProps.endDate]      // 若没有时间则不显示      if (!start_date || !end_date) {        return      }      let between = dayjs(date).isBetween(start_date, end_date, unit)      if (between) {        return "wl-item-on"      }      let start = dayjs(start_date).isSame(date, unit)      let end = dayjs(end_date).isSame(date, unit)      if (start && end) {        return "wl-item-on wl-item-full"      }      if (start) {        return "wl-item-on wl-item-start"      }      if (end) {        return "wl-item-on wl-item-end"      }    },        realDayGanttType(row, date, unit = "days") {      let start_date = row[this.selfProps.realStartDate]      let end_date = row[this.selfProps.realEndDate]      // 若没有实际时间则不显示      if (!start_date || !end_date) {        return      }      let between = dayjs(date).isBetween(start_date, end_date, unit)      if (between) {        return "wl-real-on"      }      let start = dayjs(start_date).isSame(date, unit)      let end = dayjs(end_date).isSame(date, unit)      if (start && end) {        return "wl-real-on wl-real-full"      }      if (start) {        return "wl-real-on wl-real-start"      }      if (end) {        return "wl-real-on wl-real-end"      }    },    // 点击选中单元格    selectedCell(row) {},    // 以下是表格-日期-gantt生成函数----------------------------------------生成gantt表格-------------------------------------        mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth) {      // 处理年份      let year_diff = end_year - start_year      // 只存在同年或前后年的情况      if (year_diff === 0) {        // 年间隔为同一年        let isLeap = this.isLeap(start_year) // 是否闰年        let mouths = this.generationMonths(          start_year,          start_mouth,          end_mouth + 1,          isLeap        ) // 处理月份        return mouths      }      // 处理开始月份      let startIsLeap = this.isLeap(start_year)      let start_mouths = this.generationMonths(        start_year,        start_mouth,        13,        startIsLeap      )      // 处理结束月份      let endIsLeap = this.isLeap(end_year)      let end_mouths = this.generationMonths(        end_year,        1,        end_mouth + 1,        endIsLeap      )      return start_mouths.concat(end_mouths)    },        generationMonths(      year,      start_num = 1,      end_num = 13,      isLeap = false,      insert_days = true,      week = false    ) {      let months = []      if (insert_days) {        // 需 日 的模式        for (let i = start_num; i < end_num; i++) {          // 需要 日 的模式          let days = this.generationDays(year, i, isLeap, week)          months.push({            name: `${i}月`,            date: i,            full_date: `${year}-${i}`,            children: days,            id: uuidv4(),          })        }        return months      }      for (let i = start_num; i < end_num; i++) {        // 无需要 日 的模式        months.push({          name: `${i}月`,          date: i,          full_date: `${year}-${i}`,          id: uuidv4(),        })      }      return months    },        generationDays(year, month, isLeap = false, week = false) {      let big_month = [1, 3, 5, 7, 8, 10, 12].includes(month)      let small_month = [4, 6, 9, 11].includes(month)      let dates_num = big_month ? 32 : small_month ? 31 : isLeap ? 30 : 29      let days = []      if (week) {        let _day = 1 // 从周日开始        let _start_day_inweek = this.timeInWeek(`${year}-${month}-1`)        if (_start_day_inweek !== 0) {          _day = 8 - _start_day_inweek        }        for (let i = _day; i < dates_num; i += 7) {          days.push({            date: i,            name: `${i}日`,            id: uuidv4(),            full_date: `${year}-${month}-${i}`,          })        }      } else {        //第一个月        if (          year == this.self_start_date_year &&          month == this.self_start_date_month        ) {          for (let i = this.self_start_date_day; i < dates_num; i++) {            days.push({              date: i,              name: `${i}日`,              id: uuidv4(),              full_date: `${year}-${month}-${i}`,            })          }          //非第一个月        } else {          for (let i = 1; i < dates_num; i++) {            days.push({              date: i,              name: `${i}日`,              id: uuidv4(),              full_date: `${year}-${month}-${i}`,            })          }        }      }      return days    },        isLeap(year) {      return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)    },    // 以下是时间计算类函数 ------------------------------------------------------时间计算---------------------------------------        timeFormat(date, format = "YYYY-MM-DD") {      return date ? dayjs(date).format(format) : this.emptyCellText    },        timeInWeek(date) {      return dayjs(date).day()    },    // 合并单元格    spanMethod({ row, column, rowIndex, columnIndex }) {      if (columnIndex === 0) {        const key = "room"        const list = this.tableData        let len = list.filter((item) => row[key] === item[key]).length        let firstIndex = -1        for (let i = 0; i < this.tableData.length; i++) {          const element = this.tableData[i]          if (columnIndex === 0 && row[key] === element[key]) {            firstIndex = i            break          }        }        if (rowIndex == firstIndex) {          return {            rowspan: len,            colspan: 1,          }        }        if (rowIndex > firstIndex && rowIndex < firstIndex + len) {          return {            rowspan: 0,            colspan: 0,          }        }      }    },  },  watch: {},}</script><style lang="sCSS">.hotelApply {  padding-top: 10px;  .legend-plan,  .legend-real {    display: inline-block;    width: 40px;    height: 6px;    border-radius: 3px;    background: #00cbed;  }  .legend-real {    background: #fcc300;  }  .selected-cell {    border: 1px solid #00cbed;  }  .drawer_box {    padding: 20px;  }}</style><style lang="scss">.el-table >>> th.gutter {  display: table-cell !important;}.el-table >>> colgroup.gutter {  display: table-cell !important;}// 鼠标悬浮去除阴影.el-table tbody tr:hover > td {  background-color: #fff !important;}</style><style lang="scss">$gantt_item: 18px;$gantt_item_half: 4px;.wl-gantt {  .wl-gantt-header > th {    text-align: center;  }  .h-full {    height: 100%;  }  .wl-gantt-item {    position: relative;    transition: all 0.3s;    > .cell {      padding: 0;    }  }  .u-full.el-input {    width: 100%;  }  // 计划时间gantt开始  .wl-item-on {    position: absolute;    top: 40%;    left: 0;    right: -1px;    margin-top: -$gantt_item_half;    height: $gantt_item;    background: #00cbed;    transition: all 0.4s;    cursor: pointer;  }  .wl-item-start {    left: 10%;    &:after {      position: absolute;      top: 0;      left: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #00cbed;    }  }  .wl-item-end {    right: 10%;    &:after {      position: absolute;      top: 0;      right: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #00cbed;    }  }  .wl-item-full {    left: 5px;    right: 5px;    &:before {      position: absolute;      top: 0;      left: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #00cbed;    }    &:after {      position: absolute;      top: 0;      right: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #00cbed;    }  }  // 计划时间gantt结束  // 实际时间gantt开始  .wl-real-on {    position: absolute;    top: 75%;    left: 0;    right: -1px;    margin-top: -$gantt_item_half;    height: $gantt_item;    background: #fcc300; //rgba(250, 167, 146, .6);    transition: all 0.4s;  }  .wl-real-start {    left: 50%;    &:after {      position: absolute;      top: 0;      left: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #fcc300;    }  }  .wl-real-end {    right: 50%;    &:after {      position: absolute;      top: 0;      right: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #fcc300;    }  }  .wl-real-full {    left: 5px;    right: 5px;    &:before {      position: absolute;      top: 0;      left: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #fcc300;    }    &:after {      position: absolute;      top: 0;      right: -5px;      z-index: 1;      content: "";      width: 8px;      height: 18px;      border-radius: 50%;      background: #fcc300;    }  }  // 实际时间gantt结束  // 名称列  .name-col {    position: relative;    &:hover .name-col-edit {      display: inline-block;    }    .name-col-edit {      display: none;      position: absolute;      right: 0;    }    .name-col-icon {      padding: 6px 3px;      cursor: pointer;      font-size: 16px;    }    .task-remove {      color: #f56c6c;    }    .task-add {      color: #409eff;    }  }}//季度展示、月度展示、周展示.year-and-quarter,.year-and-month,.year-and-week {  .wl-item-start {    left: 5%;  }  .wl-item-end {    right: 5%;  }  .wl-item-full {    left: 5%;    right: 10%;  }  .wl-real-full {    left: 10%;    right: 5%;  }}</style>

效果图

“JavaScript如何用el-table实现绘制热度表”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！