526互联

vue3 基于antd3.2.20封装表格（插槽）

发布时间 2023-08-08 17:42:24作者: 随手笔记
<!-- 表格组件 -->
    <a-table
      :dataSource="tableData"
      :columns="columns"
      :pagination="false"
      :scroll="{ y: tableHeight, x: 1500 }"
      :rowKey="'id'"
    >
      <template v-slot:[item]="scope" v-for="item in renderArr">
        <slot :name="item" :scope="scope" v-bind="scope || {}"></slot>
      </template>
    </a-table>

// 表格中核心的js
import { ref, onMounted, useSlots } from 'vue'
const slots = useSlots() // 自动获取父组件传递过来的插槽
// 获取父组件过来的插槽数量，便于循环
const renderArr = Object.keys(slots)

// 获取表格的滚动（配合window.onresize,实现自适应）
const tableHeight = ref(window.document.documentElement.clientHeight - 350)

onMounted(() => {
  window.onresize = () => {
    tableHeight.value = window.document.documentElement.clientHeight - 350
  }
})

父组件直接调用

        <template v-slot:bodyCell="{ column, record }">
          <!-- 规则名称 -->
          <template v-if="column.key === 'name'">
            <div class="view_box" :title="record.name" @click="add('查看', true, record)">
              {{ record.name }}
            </div>
          </template>
          <!-- 状态 -->
          <div v-if="column.key === 'status'">
            <span v-if="record.status === 3" style="color: #4ac533">
              <CheckCircleOutlined style="color: #4ac533" theme="filled" />
              已发布
            </span>
            <span v-else :style="`color: ${record.status === 31 ? 'red' : '#ffac32'}`">
              <ClockCircleOutlined theme="filled" />
              {{ record.status === 0 ? '待发布' : record.status === 31 ? '已下线' : '审批中' }}
            </span>
          </div>
          <!-- 操作 -->
          <div v-if="column.key === 'operating'">
            <a-button
              v-if="record.status !== 3"
              type="link"
              @click="releaseItem(record)"
              :disabled="record.status === 1"
              class="table-operate-link"
            >
              发布
            </a-button>
            <a-button
              v-else
              type="link"
              @click="releaseItem(record)"
              :disabled="record.status === 1"
              class="table-operate-link table-operate-link_error"
            >
              下线
            </a-button>
            <a-button
              type="link"
              class="table-operate-link"
              :disabled="record.status === 3 || record.status === 1"
              @click="add('编辑', false, record)"
            >
              编辑
            </a-button>
            <a-button
              type="link"
              class="table-operate-link table-operate-link_error"
              @click="delItem(record)"
              :disabled="record.status === 3 || record.status === 1"
            >
              删除
            </a-button>
          </div>
        </template>

import TableItem from '@/components/itemTable.vue'
import { ReloadOutlined, PlusOutlined, CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'