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

最新推荐文章于 2024-04-24 09:40:33 发布

swagLi

最新推荐文章于 2024-04-24 09:40:33 发布

阅读量154

点赞数

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

本文链接：https://blog.csdn.net/qq_41149508/article/details/136652133

版权

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

25 篇文章 43 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

`一、首先动态生成表格需要满足一定的数据格式，比如以下表头的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="cellClassName" border style="width: 100%;margin-top:10px" :header-cell-style="{background:'#f8f8f9',color:'#515a6e'}">
<el-table-column align