ant-design-vu 表格头部自定义

最新推荐文章于 2024-03-15 10:42:35 发布

CPan_

最新推荐文章于 2024-03-15 10:42:35 发布

阅读量2.1k

点赞数

分类专栏： vuejs 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/CPan_/article/details/126741347

版权

vuejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<a-table
          :columns="columns"
          :data-source="data"
        >
          <!-- 表头自定义 -->
          <span slot="customName" style="color: #ff6b81"
            ><a-icon type="smile-o" /> 订单状态配载状态</span
          >
</a-table>

let colums = [
{
    dataIndex: 'no',
    key: 'no',
    title: '客户名称',
    scopedSlots: { customRender: 'time' }
  },
  {
    dataIndex: 'time',
    key: '配载单状态',
    <!-- 表头自定义 -->
    slots: { title: 'customName' },
    scopedSlots: { customRender: 'time' 
  }
]

效果

第二种：


<a-table
          :columns="columns"
          :data-source="data"
        >
          
</a-table>



let colums = [
{
    dataIndex: 'no',
    key: 'no',
    title: 'S/O NO',
    scopedSlots: { customRender: 'time' }
  },
  {
    dataIndex: 'time',
    key: '配载单状态',
    title: '客户名称',
    scopedSlots: { customRender: 'time' 
  }
]





在vue js引入后，然后个别title值
比如 

export default {
 data() {
    let getColumns = colums
    getColumns[1].title = (
      <div class="second-header">
        <p>客户简称</p>
        <p>客户编码</p>
      </div>
    )

    return {
      columns: getColumns ,
    }
 }
}

效果