el-table根据后台数据动态生成表头表体并根据标识设置单元格的背景颜色

swagLi

于 2024-03-12 15:01:52 发布

阅读量328

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_41149508/article/details/136652133

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

该博客介绍了如何使用Vue.js和ElementUI库动态地从后台数据生成表格的表头和表体，并详细说明了如何根据特定标识来改变表格中单元格的背景颜色，实现数据可视化的增强效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`一、首先动态生成表格需要满足一定的数据格式，比如以下表头的id要对应上表体数据的key`

 tableData:{
    headList:[
         {label:"机身颜色",id: "color"},
         {label:"等级",id: "dengji"},
         {label:"购买渠道",id: "ditch"},
         {label:"价格",id:"price},
    ],
    dataList:[
       {ditch:"大陆",color:"白色",dengji:"A级",price:100},
       {ditch:"国行",color:"黑色",dengji:"A级",price:50}
     ]
 },

`二、本次的需求是既满足动态生成表格还得操作单元格的背景颜色用到 :cell-style="cellClassName"`

<templete>
  <el-table :data="tableData.dataList" :cell-style&

了解本专栏

超级会员免费看