Kooboo-table NPM

安装与引入

安装

$ npm install kooboo-table --save

或者

$ npm install kooboo-table --save

引入

main.ts

import { createApp } from 'vue'
import KTable from 'kooboo-table';
import App from './App.vue'

const app = createApp(App)

app.use(KTable)
app.mount('#app')

全局配置

在引入 kooboo-table 的时候，可以传入一个全局配置对象，该对象目前支持 request 字段，该字段主要用于配置接口 请求参数 的属性名称和 响应数据 属性结构。

比如每个分页接口请求参数都会有 "第几页"、"每页的条数" 这两个参数，各个项目中对这些参数的名称可能是不一定的。

request 字段对应的值是一个对象，该对象包含两个字段：

paginationParamsName：请求参数中分页相关参数的配置，类型描述为

interface PaginationParamsName {
   // 第几页
   pageNo: string;
   // 每页的条数
   pageSize: string;
}

responsePath：响应数据的字段路径，类型描述为

interface PaginationParamsName {
  // 主要数据的字段路径
  data: string;
  // 数据总条数的字段路径
  total: string;
  // 总页面数的字段路径
  pageCount?: string;
}

具体使用为：

import { createApp } from 'vue';

import App from './index.vue';
import KTable from '../src/index';

createApp(App)
  .use(KTable, {
    request: {
      paginationParamsName: {
        pageNo: 'pageNr',
        pageSize: 'pageSize',
      },
      responsePath: {
        data: 'model.list',
        total: 'model.totalCount',
        pageCount: 'totalPages',
      },
    },
  })
  .mount('#app');

某个请求的请求参数为：

request_pagination_params

某个请求的请求响应数据为：

response_data

具体使用

el-table 的属性配置与事件监听

element-plus 的 table 组件的文档中的 Table Attributes、Table Events 可以直接写在 kooboo-table 中。

<k-table
  stripe
  border
  @cell-click="handleCellClick"
/>

stripe、border、cell-click 是 el-table 中定义的属性和事件，在 k-table 上可以直接使用。

el-table 的方法调用

el-table 提供了一些方法，如：clearSelection、toggleRowSelection。在 k-table 中如果需要调用 el-table 的方法，可以通过 k-table 的 ref 来调用，具体使用如下：

<template>
  <k-table
    ref="kTable"
  />
</template>
<script>
export default {
  setup() {
    const kTable = ref(null);
    function test() {
      kTable.value.tableRef.clearSelection();
    }
    return {
      kTable,
    };
  }
}
</script>

数据请求

k-table 会主动发起网络请求，通过 request 属性接收网络请求相关的信息。request 的类型描述为：

interface ITableRequest {
  method: (params: any) => Promise<any>;
  selfParams?: IAnyObject;
  paginationParamsName?: PaginationParamsName;
  responsePath?: IDataPaths;
}

具体使用为：

<template>
  <k-table 
     :request="request"
  />
</template>
<script lang="ts">
import { ITableRequest } from 'k-table';

export default {
  setup() {
    const request: ITableRequest = {
      method: requestMethod,
      selfParams: {
        aa: 'xx',
      },
      paginationParamsName: {
        pageNo: 'pageNr',
        pageSize: 'pageSize',
      },
      responsePath: {
        data: 'model.list',
        total: 'model.totalCount',
        pageCount: 'totalPages',
      },
    };
    
    return {
      request,
    };
  }
}
</script>

属性说明：

method：网络请求函数，要求是一个 Promise 函数，比如使用 axios：

  const instance = Axios.create(param);
  const requestMethod = (params: any) => instance
    .get('http://xxxx',{ params })
    .then((response: any) => response.data);

这里的 requestMethod 就可以作为请求函数。

selfParams：除了分页的请求参数之外的其他的请求参数，比如有些请求除了会带有查询条件，比如关键字搜索，那么这个关键字的相关的属性就应该写在 selfParams 中：
```
const request: ITableRequest = {
  method: requestMethod,
  selfParams: {
    key: 'fdsfdsdfsfs',
  }
}
```
paginationParamsName、responsePath：具体使用看全局配置，单个请求中配置的 paginationParamsName、responsePath 会覆盖全局的。

获取选中数据

获取选中数据使用 v-model:selections，具体使用如下：

<template>
  <k-table
    v-model:selections="selections"
  />
</template>

表格列配置

使用 columns 配置表格的列，columns 为一个数组（数组中的每一项代表每一列的配置），类型描述为：columns: Array<IColumn>。

IColumn 的类型描述为：

interface IColumn<T = DefaultRow> {
  label: string;
  prop: string;
  width?: number | string;
  minWidth?: number | string;
  fixed?: string | boolean;
  renderHeader?: (data: any) => any;
  sortable?: true | false | 'custom';
  sortMethod?: (a: any, b: any) => number;
  sortBy?: string | Array<string> | ((row: any, index: number) => any);
  sortOrders?: Array<any>;
  resizable?: boolean;
  showOverflowTooltip?: boolean;
  align?: string
  headerAlign?: string
  display?: boolean | ((col: IColumn) => boolean);
  className?: string;
  labelClassName?: string;
  reserveSelection?: boolean;
  renderCell?: renderFn;
  formatter?: (data: T) => string | number | boolean;
  defaultColText?: string;
  useDefaultColText?: boolean;
  operations?: Array<IOperation<T>>;
}

以上的属性和 el-table 中的 Table-column Attributes 基本基本一致。

renderCell 为 kooboo-table 中的特殊属性，renderCell 返回一段 JSX，方便处理某些特殊的列。具体使用为：

const columns: Array<IColumn> = [
  {
    label: 'actionType',
    renderCell(data: any) {
      return <span style="color: red;">{data.actionType}</span>;
    },
  }
]

useDefaultColText、useDefaultColText，这两个配合使用：

useDefaultColText：指定当接口返回的数据中，某一列为空时，是否使用默认文本。
useDefaultColText：设置默认文本。

具体使用：

const columns: Array<IColumn> = [
  {
    label: 'actionType',
    prop: 'actionType',
    useDefaultColText: true,
    defaultColText: '--',
  }
]

operations：用来配置操作列，在某一个表格中经常有一列（一般是最后一列）用来放置操作按钮，kooboo-table 对此做了特殊处理，在 column 中传入 operations 来定义操作按钮。

const columns: Array<IColumn> = [
  {
    label: '操作',
    operations: [
      {
        text: '删除',
        handleClick() {
          console.log('dd');
        },
      },
    ]
  }
]

operations 的类型描述为 operations?: Array<IOperation<T>>，IOperation 的类型描述为：

interface IOperation<T = any> {
  // 按钮的文本
  text?: string;
  title?: string;
  className?: string;
  // 字体图标的类
  icon?: string;
  iconPosition?: 'left' | 'right';
  // render 方法返回一段 jsx
  render?: renderFn;
  // 点击事件
  handleClick: (data: T) => void;
  disabled?: boolean | ((data: T) => boolean);
  display?: boolean | ((data: T) => boolean);
  // el-button 的属性
  originalElBtnProps?: {
    size?: 'medium' | 'small' | 'mini';
    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text',
    plain?: boolean;
    round?: boolean;
    circle?: boolean;
    autofocus?: boolean;
  }
}

分页

kooboo-table 中集成了 el-pagination，分页相关的属性：

show-pagination：控制是否显示分页条（默认显示）
pagination-layout：配置分页条的组件布局，使用同 el-pagination 中的 layout，默认取值为：'total, prev, pager, next, sizes, jumper, ->'
page-count、page-sizes、pageSize、hide-on-single-page：用法与 el-pagination 中的同名属性一致