• 技术文章 >web前端 >Vue.js

    Vue-Beauty是什么

    coldplay.xixicoldplay.xixi2020-11-30 14:02:57原创776

    Vue-Beauty是一个【ant-design】风格的vue组件库,诞生于【ant-design-vue】之前,作为非官方组件到官方组件的过渡状态插件。

    【相关文章推荐:vue.js

    vue-beauty是一个 ant-design 风格的 vue 组件库,诞生于 ant-design-vue 之前。作为非官方组件 到 官方组件的过渡状态插件,这里记录一下它的 dateTable 组件的使用。

    dateTable 用来展示从服务端异步获取的数据列表。

    参照官方文档,它的基础使用方法:

    e0fba1d786ccafeefa14d4f2849856c.png

    下面说下使用过程中需要注意的地方:

    返回的数据格式一定要按照官方文档给的示例字段进行返回,否则 dataTable 获取不到值。且返回的对象需要是一个 promise 对象。

       {
            "result":[
                {
                    "name": "高级动物",
                    "time": "03:37",
                    "singer": "窦唯",
                    "album": "摇滚中国乐势力"
                },
                {
                    "name": "谁伴我闯荡 - (电影《Beyond日记》插曲)",
                    "time": "04:13",
                    "singer": "Beyond",
                    "album": "25周年精选"
                },
                .....
            ],
            "totalCount":11,
            "pageSize":10,
            "pageNo":1
        }

    由于 HTML5 不支持驼峰式写法,官方给出的 API 书写在标签中时,注意改成短横线连接。以 pageSize 为例:

    6cee051cefd7f32ec3f4153dc4ed81f.png

    要写成 page-size 的形式

    <v-data-table ref="xtable" :data='loadData' :columns='columns' :page-size="pageSize">

    相关免费学习推荐:javascript(视频)

    以上就是Vue-Beauty是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue-Beauty
    上一篇:vue.js如何带参数跳转 下一篇:vue怎么请求后端数据

    相关文章推荐

    • vue中为什么v-for指令的 key 值不能是 index?• 聊聊vue2.x中this的指向问题,它为什么指向vue实例?• 深入解析Vue3中的 diff 算法(图文详解)• Vue3中5个可以提高开发效率的小知识【整理分享】• 解析源码,看看 vue 编译器是怎么生成渲染函数的!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网