vue3-ant-design-vue [a-table]的封装

我们_俩

已于 2023-06-29 17:32:41 修改

阅读量328

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-22 16:05:40 首次发布

本文链接：https://blog.csdn.net/weixin_44089774/article/details/129712199

版权

该文章展示了如何在Vue3中使用TypeScript对ant-design-vue的a-table进行封装，包括设置row-selection，处理数据加载状态，列定义，表格数据，分页等功能，并提供了事件处理方法。

摘要由CSDN通过智能技术生成

vue3-ant-design-vue [a-table]的封装

// table-mould.vue
<template>
  <div class="table-mould">
    <a-table
      :row-selection="
        props.rowSelection
          ? { selectedRowKeys: props.selectedRowKeys, onChange: onSelectChange, getCheckboxProps:getCheckboxProps }
          : null
      "
      :pagination="false"
      :defaultExpandAllRows="true"
      :loading="props.tableLoading"
      :columns="props.columns"
      :data-source="props.tableData"
      :scroll="props.scroll"
      :size="props.size"
      :bordered="props.bordered"
      @change="handleChange"
    >
      <template v-for="item in Object.keys($slots)" #[item]="scoped">
        <slot :name="item" v-bind="scoped"></slot>
      </template>
    </a-table>
    <a-pagination
      v-if="props.total>0"
      :current="props.current"
      :page-size="props.pageSize"
      :page-size-options="pageSizeOptions"
      show-quick-jumper
      showSizeChanger
      :total="props.total"
      @change="onPageChange"
      :show-total="() => `共${props.total}条`"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { any } from "vue-types";
type Key = string | number;
interface pageType {
  page: number;
  pageSize: number;
}
const props = defineProps({
  rowSelection: { //控制是否多选
    type: Boolean,
    default: false,
  },
  tableLoading: { //控制是否多选
    type: Boolean,
    default: false,
  },
  selectedRowKeys: Array,//控制多选数据
  columns: Array,
  tableData: Array,
  current: Number,
  pageSize: Number,
  total: {
    type:Number,
    default:0
  },
  size:{
    type:String,
    default:'default'
  },
  bordered: { 
    type: Boolean,
    default: false,
  },
  scroll:Object
});
const pageSizeOptions = ref<string[]>(['15', '30', '50']);
const emit = defineEmits({
  onSelectKeys: null,
  setPageChange: null,
  change:null
})
const onSelectChange = (selectedKeys: Key[]) => {
  // console.log(selectedKeys)
  // tableState.selectedRowKeys = selectedKeys;
  emit('onSelectKeys',selectedKeys)
};
const getCheckboxProps = (record: any) => ({
  disabled: record.disabled,
})
const onPageChange = (page: number, pageSize: number) => {
  let pageData:pageType = {
    page,
    pageSize
  }
  emit('setPageChange',pageData)
};
 const handleChange = (pagination, filters, sorter) => {
    emit("change",{pagination, filters, sorter})
  };
</script>

<style lang="less">
.table-mould {
  .operation-btn {
    margin-right: 14px;
  }
  .red {
    color:#ff4d4f;
  }
  .green {
    color:#00B42A;
  }
  .gray {
    color:#ccc;
    cursor:not-allowed;
  }
  .ant-pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    .ant-pagination-total-text {
      line-height: 34px;
    }
  }
}
</style>