AntD Vue中a-table的使用

这篇具有很好参考价值的文章主要介绍了AntD Vue中a-table的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

  1. 列名显示

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

其中

row-selection:选择功能;去掉row-selection配置,列表前面不显示勾选框

selectedRowKeys:指定选中项的 key 数组,需要和 onChange 进行配合;选中的数据;

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

columnTitle:自定义列表选择框标题;值为空时,可以去掉勾选框

  1. 冻结列

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
  1. 表格分页

: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:分页的配置项;没有此项的话,当前页面就没有分页功能;

  1. 其他

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分开显示角色名称,可用上述代码完成


持续更新中,未完待续文章来源地址https://www.toymoban.com/news/detail-591518.html

到了这里,关于AntD Vue中a-table的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包