【框架】表格组件

描述

基于antdesign UI a-table二次封装的列表组件

使用方法

基本使用方法和a-table相似，具体看下面代码示例

<template>
  <Table
         :columns="Table.columns"
         :querys="Table.querys"
         :load="Table.loadData"
         auto
  >
        <!-->
          这里slot插槽同a-table
        <-->
  </Table>
</template>
<script>
  import Table from "@/components/Table";//引用组件
	import { GetList } from "@/config/data";//引用接口
  export default {
  	...//省略无关代码
  	data(){
  		return {
  			Table:{
  				columns:[],//表头设置，同a-table
          querys:{},//这里是筛选查询条件属性
          loadData(filters) {//请求接口设置
            return GetList(filters).then((res) => {
              return {
                items: res.items, //数据数组
                total: res.total, //总数
              };
            });
          },
  			}
  		}	
  	}
    ...//省略无关代码
  }
  
</script>

请求接口要求

1.必要参数 page(请求第几页)、pageSize(请求每页数量)
2.必要数据 items(返回数据数组)、total(数组总数)

组件API

columns【Array】(必要参数) 同a-table
querys 【Object】(必要参数)
其属性值作为接口的筛选参数（不包括page和pageSize），若无筛选，则为{}
load【function】(必要参数)
调用接口返回一个Promise对象 ，Promise返回的数据格式{items[Array],total[Number]}
auto 【Boolean】(可选参数)
querys的值改变后，组件内部是否自动调起接口进行查询(0.5s的防抖)，默认false
若auto值为false,在修改完querys里的属性值后用ref的方式调用组件内的方法loadData来获取数据

占用API

此组件是对a-table的二次封装，因此api用法请参考a-table的api,但因为封装，如下api已被占用，无法修改
占用api：rowKey、loading、pagination、dataSource

相关地址

a-table文档：https://2x.antdv.com/components/table-cn/

最后

以上就是健康网络为你收集整理的【框架】表格组件【框架】表格组件的全部内容，希望文章能够帮你解决【框架】表格组件【框架】表格组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。