基础表格使用
百度已收录

一、a-table组件使用说明

a-table为Ant Design Vue的表格组件,使用示例如下所示:

<a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :customRow="clickThenCheck"
>
  <template slot="action" slot-scope="text, record">
   <a @click="handleEdit(record)">
    编辑
   </a>
   <a-divider type="vertical" />
   <a-dropdown >
    <a class="ant-dropdown-link">更多
        <ych-icon type="down"/>
    </a>
    <a-menu slot="overlay">
          <a-menu-item v-if="canDel">
                <a @click="handleDel(record)">删除</a>
          </a-menu-item>
    </a-menu>
   </a-dropdown>
 </template>
</a-table>

1、a-table组件属性

【dataSource】:表格数据数组

【columns】:表格列的配置描述,详情参考1.1

【bordered】:是否展示外边框和列边框,boolean类型

【defaultExpandAllRows】:初始时,是否展开所有行,boolean类型

【defaultExpandedRowKeys】:默认展开的行,每行数据key的String数组

【expandedRowKeys】:展开的行,控制属性,展开数据key的String数组

【expandRowByClick】:通过点击行来展开子行

【loading】:页面是否加载中

【pagination】:分页器

【rowClassName】:表格行的类名

【rowKey】:表格行 key 的取值,可以是字符串或一个函数

【rowSelection】:列表项是否可选择

【scroll】:设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x 设置一个数字,如果要设置为 true,需要配合样式 .ant-table td { white-space: nowrap; }

【showHeader】:是否显示表头

【size】:表格大小 default | middle | small

【title】:表格标题

【customHeaderRow】:设置头部行属性

【customRow】:设置行属性

1.1 columns

columns使用示例如下:

columns: [
{
    title: '#',
    dataIndex: '',
    key: 'rowIndex',
    width: 40,
    align: "center",
    customRender: function (t, r, index) {
        return parseInt(index) + 1;
    }
},
{
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center',
    width: 255,
},
{
    title: '项目编号',
    dataIndex: 'projectNum',
    align: 'center',
    width: 255,
}
]

column为列描述数据对象,是 columns 中的一项

 column属性说明:

【align】:设置列内容的对齐方式

【ellipsis】:超过宽度将自动省略,暂不支持和排序筛选一起使用。

【colSpan】:表头列合并,设置为 0 时,不渲染

【dataIndex】:列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法

【defaultFilteredValue】:默认筛选值

【filterDropdown】:可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互

【filterDropdownVisible】:用于控制自定义筛选菜单是否可见

【filtered】:标识数据是否经过过滤,筛选图标会高亮

【filteredValue】:筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组

【filterMultiple】:是否多选

【filters】:表头的筛选菜单项

【fixed】:列是否固定,可选 true(等效于 left) ‘left’ ‘right’

【key】:Vue 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性

【customRender】:生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并

【sorter】:排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 true

【sortOrder】:排序的受控属性,外界可用此控制列的排序,可设置为 ‘ascend’ ‘descend’ false

【sortDirections】:支持的排序方式,取值为 ‘ascend’ ‘descend’

【title】:列头显示文字

【width】:列宽度

【customCell】:设置单元格属性

【customHeaderCell】:设置头部单元格属性

【onFilter】:本地模式下,确定筛选的运行函数, 使用 template 或 jsx 时作为filter事件使用

【onFilterDropdownVisibleChange】:自定义筛选菜单可见变化时调用,使用 template 或 jsx 时作为filterDropdownVisibleChange事件使用

【slots】:使用 columns 时,可以通过该属性配置支持 slot 的属性,如 slots: { filterIcon: ‘XXX’}

【scopedSlots】:使用 columns 时,可以通过该属性配置支持 slot-scope 的属性,如 scopedSlots: { customRender: ‘XXX’}

1.2 pagination

采用分页的形式分隔长列表,每次只加载一个页面。

Pagination使用示例:

data() {
  return {
    …….
    /*分页参数*/
    pagination: {
      current: 1,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
      showTotal: (total, range) => {
        return range[0] + "-" + range[1] + " 共" + total + "条"
      },
      showQuickJumper: true,
      showSizeChanger: true,
      total: 0
    },
………
}
}

Pagination属性:

【current(v-model)】:当前页数

【defaultCurrent】:默认的当前页数

【defaultPageSize】:默认的每页条数

【disabled】:禁用分页

【hideOnSinglePage】:只有一页时是否隐藏分页器

【itemRender】:用于自定义页码的结构,可用于优化 SEO

【pageSize(.sync)】:每页条数

【pageSizeOptions】:指定每页可以显示多少条

【showQuickJumper】:是否可以快速跳转至某页

【showSizeChanger】:是否可以改变 pageSize

【showTotal】:用于显示数据总量和当前数据顺序

【simple】:当添加该属性时,显示为简单分页

【size】:当为「small」时,是小尺寸分页

【total】:数据总数

Pagination事件:

【change】:页码改变的回调,参数是改变后的页码及每页条数

【showSizeChange】:pageSize 变化的回调

2、a-table组件事件

【expandedRowsChange】:展开的行变化时触发

【change】:分页、排序、筛选变化时触发

【expand】:点击展开图标时触发

二、a-table组件运行效果