antd-vue table组件二次封装(ts版本)

前言:现在公司开发大佬们都在用ant框架了,既然换框架,当然得重新二次封装组件,table又是最最常用的组件,所以打算记录一下目前在项目中用到的封装完成的table组件。非常方便,就算换项目,复制过去继续用就完事了。


先放使用方法

<tableComponent
        ref="table"
        :columns="columns" // 表头
        :is-page="true" // 是否需要分页器
        :height="600" // 表格高度
        :apiFun="getList" // 直接请求api展示 直接传一个分页查询接口名,内部会自动解析数据,将columns中的dataIndex和字段名对应,表格就完事了。
        :setParams="setParams" // 分页参数
        :is-select="true" // 是否需要多选
        @row-change="tableSelect($event)" // 多选回调
        :selectedRowKeys="tableSele" // 多选下标集合
        @pageClick="pageClick"
      >
      // 插槽
        <div slot="ope" slot-scope="{ record }">
          <a-button type="link" @click="view(record)">查看</a-button>
          <a-button type="link" @click="delItem(record)">删除</a-button>
        </div>
      </tableComponent>

页面使用

// 项目中的分页查询接口名,传给table
getList = ProductActions.list; 
// 查询参数
dataPost: GetProductListInputDto = {
    keyWordType: 0,
    keyWord: "",
    productName: "",
    productType: "",
    contractTimeStart: "",
    contractTimeEnd: "",
    warrantyTimeStart: "",
    warrantyTimeEnd: "",
    createTimeStart: "",
    createTimeEnd: ""
  };
// 分页请求参数 这里可以做一些请求参数的自定义
setParams() {
  const data = { ...this.dataPost };
  data.contractTimeStart = this.contractTimeStart[0];
  data.contractTimeEnd = this.contractTimeStart[1];
  data.warrantyTimeStart = this.warrantyTimeStart[0];
  data.warrantyTimeEnd = this.warrantyTimeStart[1];
  data.createTimeStart = this.createTimeStart[0];
  data.createTimeEnd = this.createTimeStart[1];
  return data;
}

成品图
在这里插入图片描述

组件内部实现

@Prop({ type: Boolean, default: true }) readonly isPage!: boolean; // 是否分页
@Prop({ type: Function }) readonly apiFun: Function | undefined; //api  (若果传了apiFun,默认请求)
@Prop({ type: Function }) readonly setParams: Function | undefined; //接口参数
@Prop({ type: Function }) readonly pageChange: Function | undefined; // 页码改变的回调函数
 // api获取数据
  getData() {
    if (this.apiFun) {
      this.loading = true;
      const pagination = {
        skipCount: (this.currentPage - 1) * this.pageSize,
        maxResultCount: this.pageSize
        // sorting: "CreationTime Desc"
      };

      let query = this.setParams ? this.setParams(pagination) : {};
      if (this.isPage) {
        if (query["skipCount"] === undefined) {
          query = {
            ...pagination,
            ...query
          };
        }
      }
      this.apiFun(query)
        .then((res: any) => {
          this.loading = false;
          if (this.isPage) {
            this.tableData = res.data.items;
            this.total = res.data.totalCount;
          } else {
            this.tableData = res.data;
          }
          this.$emit("pageClick", this.tableData);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
  //刷新数据(使用ref外部调用)
  refresh(val: boolean) {
    if (this.apiFun) {
      if (val) {
        this.currentPage = 1;
        this.getData();
      } else {
        this.getData();
      }
    }
  }

记录一下,方便以后继续使用

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页