vue-antd-admin-skeleton/src/pages/components/table/Api.vue

<template>
  <div class="api">
    <div class="introduce">
      <h2 class="title">说明</h2>
      <p class="content">
        AdvanceTable 是基于 Ant Design Vue Table 组件封装，支持其所有 API。<br/>
        主要添加了<em>列设置</em>及<em>搜索控件配置</em>的功能，可用于一些需要动态配置表格展示、动态配置搜索条件的场景。<br/>
        使用方式 与 antd table 基本无异。添加了部分API，如下：
      </p>
    </div>
    <api-table :api-source="apiSource" />
    <api-table type="event" title="事件" :api-source="events" />
    <api-table title="Column" :api-source="columnApi" />
    <api-table title="Search" :api-source="searchApi" />
  </div>
</template>

<script>
  import ApiTable from '@/components/table/api/ApiTable'
  export default {
    name: 'Api',
    components: {ApiTable},
    data() {
      return {
        apiSource: [
          {
            key: 0,
            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table API</a>',
            desc: '支持 Ant Design Vue Table 组件 所有 api',
            type: '--',
            default: '--',
          },
          {
            key: 1,
            param: 'title',
            desc: '表格标题',
            type: 'string | slot',
            default: '\'高级表格\''
          },
          {
            key: 2,
            param: 'formatConditions',
            desc: `是否格式化搜索条件的值，格式化规则参考 <a>Search 配置</a>。
                   <br/>false：取搜索输入控件的原值 <br/>true：取搜索输入控件格式化后的值`,
            type: 'boolean',
            default: 'false',
          },
          {
            key: 3,
            param: 'columns',
            desc: `表格列配置，参考 <a>Column 配置</a>`,
            type: 'array',
            default: '--',
          }
        ],
        events: [
          {
            key: 0,
            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Events API</a>',
            desc: '支持 Ant Design Vue Table 所有事件',
            callback: '--',
          },
          {
            key: 1,
            param: 'search',
            desc: '搜索条件变化时触发',
            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
          },
          {
            key: 2,
            param: 'refresh',
            desc: '表头刷新图标点击时触发',
            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
          },
          {
            key: 3,
            param: 'reset',
            desc: '列配置重置按钮点击时触发',
            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
          },
        ],
        columnApi: [
          {
            key: 0,
            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Column API</a>',
            desc: '支持 Ant Design Vue Table 组件 Column 配置所有 api',
            type: '--',
            default: '--'
          },
          {
            key: 1,
            param: 'searchAble',
            desc: '是否启用列搜索',
            type: 'boolean',
            default: 'false'
          },
          {
            key: 2,
            param: 'dataType',
            desc: `数据类型，该配置将决定列搜索输入控件的类型，与列搜索输入控件对应关系如下：<br/>
                   string: 输入框组件<br/>
                   boolean: 开关组件<br/>
                   select: 下拉输入框组件<br/>
                   date: 日期选择器<br/>
                   time: 时间选择器<br/>
                   datetime: 带时间选择器的日期选择器`,
            type: `'string' | 'boolean' | 'select' | 'date' | 'time' | 'datetime'`,
            default: `'string'`
          },
          {
            key: 3,
            param: 'search',
            desc: '列搜索配置，参考 <a>Search 配置</a>',
            type: 'object',
            default: '--'
          },
        ],
        searchApi: [
          {
            key: 0,
            param: 'format',
            desc: `列搜索输入控件值的格式化配置。<br/>如果输入控件支持格式化，则可设置该值为字符串，如日期输入组件，可设为为 'YYYY-MM-DD'。
                   <br/>不支持格式化的输入控件，可设置为一个接收控件的输入值作为参数的函数，如 (value) => {return \`prefix\${value}\`}。`,
            type: 'string | Function(value)',
            default: '取输入控件默认的格式化配置'
          },
          {
            key: 1,
            param: 'selectOptions',
            desc: `select 数据类型的下拉输入组件的选项配置，可参考 <a href="https://www.antdv.com/components/select-cn/#API" target="_blank">Ant Design Vue Select Option props Api</a>`,
            type: 'array',
            default: '--'
          }
        ],
      }
    }
  }
</script>

<style scoped lang="less">
.api{
  .introduce{
    padding: 16px;
    .content{
      em{
        margin: 0 4px;
        color: @primary-color;
      }
    }
  }
}
</style>