Ant Design Vue 框架的a-table自定义表头样式和内容

注：开发环境vue2，ant版本1.7.8

ant版本不同api有所不同

 需求：表头要显示红色星星，操作栏展示删除按钮

 

 1、script中创建表头

  <script>
  export default {
  data() {
      return {
         columns: [
          { 
            dataIndex: 'value',
            slots: { title: 'titleValue' },//表头插槽
            scopedSlots: { customRender: 'value' },//表格内容插槽
            align: 'center',
            width: 240,
          {
            dataIndex: 'level',
            scopedSlots: { customRender: 'level' },
            slots: { title: 'titleLevel' },
            align: 'center'
          },
          {
            dataIndex: 'note',
            scopedSlots: { customRender: 'note' },
            slots: { title: 'titleNote' },
            align: 'center'
          },
          {
            title: '备注',
            dataIndex: 'market',
            scopedSlots: { customRender: 'market' },
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            align: 'center',
            width: 50
          }
     ]
   }
  }
 }

    </script>   

2、在template中引用

<template>
  <div>

      <a-table
              :rowKey="
      (record, index) => {
        return index
      }"
              :columns="columns"
              :data-source="form.editList"
              :pagination="false">
<!-- 自定义表头-->
   <span slot="titleValue" class="form-table-heard">
         分值区间
      </span>
              <span slot="titleLevel" class="form-table-heard">
         评价等级
      </span>
             <span slot="titleNote" class="form-table-heard">
         评价说明
      </span>
<!--自定义内容-->
          <span slot="operation" slot-scope="text, record,index">
            <a-button name="删除" btnType="primary" :isDanger="true" 
                  @click="handleDelete(index)"/>
                       
             </span>
   </a-table>

  </div>
</template>
<style lang="less" scoped>
 .form-table-heard:before {
      content: '*';
      color: red;
    }

</style>

3、Ant官网地址

ant的table官网地址https://1x.antdv.com/components/table-cn/