话不多说 先上效果图、

首先是样式设置,可以直接对表头添加背景色 字体颜色等 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;
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐