antd 表格表头样式设置及样式自定义方案

话不多说 先上效果图、

首先是样式设置，可以直接对表头添加背景色 字体颜色等 css样式，达到如上图 下单数量 这样的效果 代码如下

html
<div class="editTheForm">
    <a-table bordered
             :data-source="dataSource"
             :pagination='false'
             :columns="columns"
             rowKey="id">
    </a-table> 
</div>




js
columns: [{
          title: '下单数量',
          scopedSlots: { customRender: 'order_num' },
          className: 'colunm-order_num',
        },]

css
.editTheForm >>> .colunm-order_num {
  color: red;
}

自定义样式方案，这种方案可以对表头插入新的数据达到样式多样化，图标插入的效果：

html部分

 <div class="editTheForm">
    <a-table bordered
             ref="table"
             :data-source="dataSource"
             :pagination='false'
             :columns="columns"
             rowKey="id"
             :scroll="{ y: '40vh' }">
      <span slot="custom_price">
        <template>单价/件</template>
        <span class="colunm-order_num">*</span>
      </span>
    </a-table>
</div>

js部分 注意：要将title去掉，用slots,类似于具名插槽的方式

        columns: [{
          slots: { title: 'custom_price' },
          scopedSlots: { customRender: 'price' },
        },]

css部分

.editTheForm >>> .colunm-order_num {
  color: red;
}