AntD Vue中a-table的使用

浪潮行舟

已于 2023-02-17 11:20:44 修改

阅读量3.1k

点赞数 2

分类专栏：前端 VUE 文章标签：前端 vue.js Powered by 金山文档

于 2023-02-15 10:30:14 首次发布

本文链接：https://blog.csdn.net/I_nur/article/details/129038272

版权

前端同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

VUE

27 篇文章 0 订阅

订阅专栏

文章介绍了在后台管理系统中使用AntD组件库进行表格展示的方法，包括如何实现列名显示、选择功能、冻结列、表格分页以及自定义渲染。特别提到了row-selection的配置，如selectedRowKeys和onChange回调，以及如何通过fixed属性来冻结列。此外，还展示了如何处理分页和自定义渲染角色名称的示例。

摘要由CSDN通过智能技术生成

最近在一个后台管理系统中用到AntD，其中对表格用的比较多；

表格使用中，有正常列表数据、有树形数据、有嵌套表格；

对常见的表格处理进行简要总结

列名显示

:row-selection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
    columnTitle:' '}"

其中

row-selection：选择功能；去掉row-selection配置，列表前面不显示勾选框

selectedRowKeys：指定选中项的 key 数组，需要和 onChange 进行配合；选中的数据；

onChange：选中项发生变化时的回调，可以在事件中获取当前选中的数据，比如当前id/name

columnTitle：自定义列表选择框标题；值为空时，可以去掉勾选框

冻结列

columns: [
        {
          title: "姓名",
          dataIndex: "name",
          width: 120,
          scopedSlots: { customRender: "name" },
          fixed: 'left',
        },
        {
          title: "用户名",
          dataIndex: "username",
          fixed: 'left',
        },
        {
          title: "手机号",
          dataIndex: "mobile",
          width: 100,
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: 120,
          scopedSlots: { customRender: "operation" },
          fixed: 'right',
        },
      ]

直接在columns中定义fixed，其中left是冻结在左，right是冻结在右；

注意：a-table中定义横向滑动值，数值小的时候，显示列多数据较多，此时冻结后的样式会被撑开；

<a-table :scroll="{ x: 2222 }">
</a-table

表格分页

:pagination="{
              current: queryParam.pageNum,
              pageSize: queryParam.pageSize,
              total: total,
              showSizeChanger: true,
              showLessItems: true,
              showQuickJumper: true,
              showTotal: (total, range) =>
                `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
              onChange: changeSize,
              onShowSizeChange: onShowSizeChange,
            }"

pagination:分页的配置项；没有此项的话，当前页面就没有分页功能；

其他

columns: [
        {
          title: "角色",
          dataIndex: "roleNames",
          customRender: (text, record, index) => {
            return text ? (text.includes(',') ? text.split(',').map(item => <a-tag color="blue">{item}</a-tag>) : <div><a-tag color="blue">{{ text }}</a-tag></div>) : (<div></div>)
          },
          width: 270,
        },
      ]

比如当前表格是用户信息，用户角色名称为“管理员、测试员”，使用a-tag分开显示角色名称，可用上述代码完成

持续更新中，未完待续