antdv table组件封装成全局组件以及携带自定义表头展示

最新推荐文章于 2024-12-08 15:18:59 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-12-08 15:18:59 发布

阅读量3.9k

点赞数

分类专栏： vue+ vite + antdv 个人项目 vue3.0项目前期文章标签： vue.js antd table 表格封装表头设置

本文链接：https://blog.youkuaiyun.com/agua001/article/details/123919096

版权

本文介绍了如何在Vue.js中封装一个动态表格组件，包括设置表格列显示、自定义展开图标、列筛选等功能，并通过Vuex进行状态管理，存储用户自定义的列设置。组件中使用了Ant Design Vue库，提供了全选和全不选列的选项，并展示了在实际项目中的使用方式。此外，还展示了如何在main.js中全局注册该组件，以及在子组件中根据生命周期控制渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、封装table组件

// tableBox.vue
<template>
  <div class="table-c">
    <a-table
      :expandIcon="customIcon"
      :columns="tableColumns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      :rowSelection="rowSelection"
      @change="change"
      @expand="expand"
    >
      <template
        v-for="i in tableColumns"
        :key="i.key"
        v-slot:[i.slots?.customRender]="{ record }"
      >
        <slot :name="i.slots?.customRender" :record="record"></slot>
      </template>

      <template v-slot:[expandedRowRender]="{ record }">
        <slot name="expandedRowRender" :record="record"></slot>
      </template>
    </a-table>
    <a-modal
      title="列表设置"
      v-model:visible="visible"
      :width="800"
      :confirmLoading="tableHeadLoading"
      :bodyStyle="{
        paddingBottom: '10px',
      }"
    >
      <a-checkbox-group v-model:value="tableHead" class="checked-item">
        <a-row>
          <a-col
            :span="5"
            v-for="check in columns"
            :key="check.key"
            :offset="1"
          >
            <a-checkbox :value="check.key" :disabled="check.key == 'action'">
              <span
                v-text="check.key == 'action' ? '操作' : check.title"
              ></span>
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
      <template #footer>
        <div class="pop-btn-box">
          <div class="btn-left">
            <a-button @click="checkAll">全选</a-button>
            <a-button @click="checkNoAll">全不选</a-button>
          </div>
          <div class="btn-right">
            <a-button @click="handleHeadCancel">返回</a-button>
            <a-button type="primary" @click="setConfirm" class="ok-btn"
              >确定</a-button
            >
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

最低0.47元/天解锁文章