Vue-Beauty指的是什么

這篇文章將為大家詳細(xì)講解有關(guān)Vue-Beauty指的是什么，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Vue-Beauty是一個【ant-design】風(fēng)格的vue組件庫，誕生于【ant-design-vue】之前，作為非官方組件到官方組件的過渡狀態(tài)插件。

vue-beauty是一個 ant-design 風(fēng)格的 vue 組件庫，誕生于 ant-design-vue 之前。作為非官方組件 到 官方組件的過渡狀態(tài)插件，這里記錄一下它的 dateTable 組件的使用。

dateTable 用來展示從服務(wù)端異步獲取的數(shù)據(jù)列表。

參照官方文檔，它的基礎(chǔ)使用方法：

下面說下使用過程中需要注意的地方：

返回的數(shù)據(jù)格式一定要按照官方文檔給的示例字段進(jìn)行返回，否則 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 書寫在標(biāo)簽中時(shí)，注意改成短橫線連接。以 pageSize 為例：

要寫成 page-size 的形式

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

• dataTable 的 reload 方法會直接從表的第一頁開始加載

• dataTable 中的 pageSize 必須是 pageSizeOptions 數(shù)組中設(shè)置的 否則頁面上顯示會有問題

• 組件并不是所有事件都支持，具體哪個組件支持哪個事件需要查看官網(wǎng)API

關(guān)于Vue-Beauty指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。