Vue 表格颜色渐变2.0

作者: coderhzc | 来源:发表于2022-09-05 17:26 被阅读0次

Vue 表格颜色渐变2.0
根据后端传回来的数据在页面上渲染成表格，然后前端直接导出Exce
Vue2.0---将页面中表格数据导出excel
vue2.0+elementUI构建复杂表头的表格
Vue入门
秋叶ppt☞排版
Vue2.0-Vue3.0语法差异性总结
颜色渐变/渐变高亮/背景颜色渐变
vue 开发者必读的项目源代码
VUE2.0实现表格合并

需求:

当人数小于或者等于0 的时候这个地方scale取值为0

当人数大于 30 的时候这个地方的scale取值为1

scale= “人数”/ 30; // 当人数大于0 并且人数小于30 的时候你就要用人数/ 30

所有的取值是在 0和 1 之间, 黄色到红色的渐变


<template>
  <div class="hello">
    <el-table
      :data="tableData"
      border
      size="mini"
      height="600"
      :cell-style="colorStyle"
      :header-cell-style="{ background: '#e2d2d2', color: '#fff' }"
    >
      <el-table-column prop="name" label="通道名称" width="180">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column width="50" prop="1" label="1时"> </el-table-column>
      <el-table-column width="50" prop="2" label="2时"> </el-table-column>
      <el-table-column width="50" prop="3" label="3时"> </el-table-column>
      <el-table-column width="50" prop="4" label="4时"> </el-table-column>
      <el-table-column width="50" prop="5" label="5时"> </el-table-column>
      <el-table-column width="50" prop="6" label="6时"> </el-table-column>
      <el-table-column width="50" prop="7" label="7时"> </el-table-column>
      <el-table-column width="50" prop="8" label="8时"> </el-table-column>
      <el-table-column width="50" prop="9" label="9时"> </el-table-column>
      <el-table-column width="55" prop="10" label="10时"> </el-table-column>
      <el-table-column width="55" prop="11" label="11时"> </el-table-column>
      <el-table-column width="55" prop="12" label="12时"> </el-table-column>
      <el-table-column width="55" prop="13" label="13时"> </el-table-column>
      <el-table-column width="55" prop="14" label="14时"> </el-table-column>
      <el-table-column width="55" prop="15" label="15时"> </el-table-column>
      <el-table-column width="55" prop="16" label="16时"> </el-table-column>
      <el-table-column width="55" prop="17" label="17时"> </el-table-column>
      <el-table-column width="55" prop="18" label="18时"> </el-table-column>
      <el-table-column width="55" prop="19" label="19时"> </el-table-column>
      <el-table-column width="55" prop="20" label="20时"> </el-table-column>
      <el-table-column width="55" prop="21" label="21时"> </el-table-column>
      <el-table-column width="55" prop="22" label="22时"> </el-table-column>
      <el-table-column width="55" prop="23" label="23时"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 1. 引入 chroma-js 库
import chroma from "chroma-js"
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    console.log(chroma("#D4F880").darken().hex(), "chroma")
  },
  methods: {
    colorStyle({ row, column }) {
      var color_scale = chroma.scale(["yellow", "red"])
      let bgc = (scale) =>`background: rgba(${color_scale(scale)._rgb.toString()})`
      console.log(bgc(1), "color_scale")
      for (let i = 0; i < this.tableData.length; i++) {
        if (row[i] <= 0 && column.label === `${i + 1}时`) {
          return `${bgc(0)} !important;`
        } else if (row[i] >= 30 && column.label === `${i + 1}时`) {
          return `${bgc(1)}  !important;`
        } else if (row[i] > 0 && row[i] < 30 && column.label === `${i + 1}时`) {
          return `${bgc(Math.fround(row[i] / 30))} !important;`
        }
      }

    },
  },
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

实际截图

image.png

解决方案:

1. 引入 chroma-js 库 : npm install chroma-js

2. 在表格上绑定一个事件:  :cell-style="colorStyle"

3. 在这个方法中去实现处理逻辑

实际截图

image.png

chroma-js的具体使用方法

需求二:

电脑当前时间以前的就渲染数据,比如说显示15:21 以前的数据正常的渲染出来在那个表格上,15:21以后的就在表格上添上 "--"(当你未来没有经历过的事情，就先空着，当已经发生的事情就显示出来)

<template>
  <div class="hello">
    <el-table
      :data="tableData"
      border
      size="mini"
      height="600"
      :cell-style="colorStyle"
      :header-cell-style="{ background: '#e2d2d2', color: '#fff' }"
    >
      <el-table-column prop="name" label="通道名称" width="180">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column width="50" prop="1" label="1时"> </el-table-column>
      <el-table-column width="50" prop="2" label="2时"> </el-table-column>
      <el-table-column width="50" prop="3" label="3时"> </el-table-column>
      <el-table-column width="50" prop="4" label="4时"> </el-table-column>
      <el-table-column width="50" prop="5" label="5时"> </el-table-column>
      <el-table-column width="50" prop="6" label="6时"> </el-table-column>
      <el-table-column width="50" prop="7" label="7时"> </el-table-column>
      <el-table-column width="50" prop="8" label="8时"> </el-table-column>
      <el-table-column width="50" prop="9" label="9时"> </el-table-column>
      <el-table-column width="55" prop="10" label="10时"> </el-table-column>
      <el-table-column width="55" prop="11" label="11时"> </el-table-column>
      <el-table-column width="55" prop="12" label="12时"> </el-table-column>
      <el-table-column width="55" prop="13" label="13时"> </el-table-column>
      <el-table-column width="55" prop="14" label="14时"> </el-table-column>
      <el-table-column width="55" prop="15" label="15时"> </el-table-column>
      <el-table-column width="55" prop="16" label="16时"> </el-table-column>
      <el-table-column width="55" prop="17" label="17时"> </el-table-column>
      <el-table-column width="55" prop="18" label="18时"> </el-table-column>
      <el-table-column width="55" prop="19" label="19时"> </el-table-column>
      <el-table-column width="55" prop="20" label="20时"> </el-table-column>
      <el-table-column width="55" prop="21" label="21时"> </el-table-column>
      <el-table-column width="55" prop="22" label="22时"> </el-table-column>
      <el-table-column width="55" prop="23" label="23时"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import tableData from "@/assets/tableData.json"
// import { parseTime } from "@/utils"
import chroma from "chroma-js"
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      tableData: [
        {
          0: 0,
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 1,
          6: 1,
          7: 3,
          8: 1,
          9: 10,
          10: 6,
          11: 3,
          12: 0,
          13: 0,
          14: 1,
          15: 3,
          16: 5,
          17: 4,
          18: 1,
          19: 5,
          20: 7,
          21: 9,
          22: 2,
          23: 0,
          cid: 739,
          name: "R0424临江大道横堤闸口",
          date: "0502",
        }
        ....
      ],
    }
  },
  created() {
    const TIME = this.parseTime(new Date(), "{h}")
    console.log()
    this.tableData.forEach((item) => {
      for (const key in item) {
        if (Object.hasOwnProperty.call(item, key)) {
          if (!isNaN(+key)) {
            if (+key > +TIME) {
              item[key] = "--"
            }
          }
        }
      }
    })
    console.log(this.tableData, "  this.tableData")
  },
  methods: {
    parseTime(time, cFormat) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"
      let date
      if (typeof time === "object") {
        date = time
      } else {
        if (typeof time === "string") {
          if (/^[0-9]+$/.test(time)) {
            // support "1548221490638"
            time = parseInt(time)
          } else {
            // support safari
            // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
            time = time.replace(new RegExp(/-/gm), "/")
          }
        }

        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value]
        }
        return value.toString().padStart(2, "0")
      })
      return time_str
    },

    colorStyle({ row, column }) {
      var color_scale = chroma.scale(["green", "yellow", "red"])
      let bgc = (scale) =>
        `background: rgba(${color_scale(scale)._rgb.toString()})  !important;`
      // 再来填条件
      for (let i = 0; i <= this.tableData.length; i++) {
        if (row[i] <= 0 && column.label === `${i}时`) {
          return bgc(0)
        } else if (row[i] >= 30 && column.label === `${i}时`) {
          return bgc(1)
        } else if (row[i] > 0 && row[i] < 30 && column.label === `${i}时`) {
          return bgc(Math.fround(row[i] / 30))
        }
      }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

实际截图:

image.png

Vue 表格颜色渐变2.0
需求: 当人数小于或者等于0 的时候这个地方scale取值为0当人数大于 30 的时候这个地方的scale取值...
根据后端传回来的数据在页面上渲染成表格，然后前端直接导出Exce
页面上表格直接导出表格 vue2.0 导出Excel表格数据
Vue2.0---将页面中表格数据导出excel
Vue2.0---将页面中表格数据导出excel 这不是教程，是随笔。项目中将后台返回的数据v-for到表格中，...
vue2.0+elementUI构建复杂表头的表格
vue2.0+elementUI构建复杂表头的表格（点击表头收缩列） css部分 HTML部分 js部分效果预览图
Vue入门
Vue2.0官方文档英文版Vue2.0官方文档中文版 Vue2.0API英文版Vue2.0API中文版 VUE系列...
秋叶ppt☞排版
线条渐变之美表格对比表格
Vue2.0-Vue3.0语法差异性总结
Vue2.0 Vue2.0实例 Vue2.0 组件使用组件的细节在 ttable > tbody > tr 使...
颜色渐变/渐变高亮/背景颜色渐变
background: linear-gradient(to right, #ff6034, #ee0a24); ...
vue 开发者必读的项目源代码
vue-hackernews-2.0使用到的技术： Vue 2.0 + vue-router + vuex + s...
VUE2.0实现表格合并
在实际开发中，有可能会遇到类似于以下表格设计的需求：这是一个简单的表格合并行，我将以此为例写写我实现的思路。实...