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

最新推荐文章于 2025-09-28 15:24:21 发布

原创最新推荐文章于 2025-09-28 15:24:21 发布 · 1.6w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ant框架

ant-vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue2项目中使用Ant Design v1.7.8版本创建表格，并实现表头显示红色星星以及操作列展示删除按钮的功能。通过在script中定义表头结构和在template中应用自定义插槽，实现了表头的自定义样式和操作列的操作按钮。同时提供了Ant Design表格组件的官方文档链接。

注：开发环境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>