Jeecg-Boot 修改 table 里面的样式

  1. 前景提要

table 里面的数据是根据 data() 里面的数据直接显示在界面上的,那么如何在其展示的过程中修改其样式呢?
html
Jeecg-Boot 修改 table 里面的样式_第1张图片
script:
Jeecg-Boot 修改 table 里面的样式_第2张图片

  1. 修改方法:使用插槽

第一步
给插槽将该列的数据传递过去

scopedSlots: {
      customRender: 'itemtext' },

Jeecg-Boot 修改 table 里面的样式_第3张图片
第二步:
使用对应的插槽展示接收到的数据,在此过程中改变样式

<span slot="itemtext" slot-scope="itemtext,record">
  <a-tag>{
     {
     itemtext}}</a-tag>
</span>
//此外,color也可以根据数据内容判断显示什么样的样式
//:color="itemtext==='1' ? 'green' :  itemtext==='2' ? 'geekblue' :  'volcano'"

Jeecg-Boot 修改 table 里面的样式_第4张图片

你可能感兴趣的:(Jeecg-Boot,jeecg-Boot,antd,vue,vue)