欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ant?Design?Vue中的table與pagination的聯(lián)合使用方式

 更新時間:2022年10月20日 14:55:02   作者:進擊的桐人  
這篇文章主要介紹了Ant?Design?Vue中的table與pagination的聯(lián)合使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Ant Design Vue中table與pagination聯(lián)合使用

表格table使用鏈接:ant design vue : Table

分頁pagination使用鏈接:ant design vue: Pagination

表格單獨使用時,自帶簡單分頁,只包含 上一頁, 頁面碼, 下一頁,例如:

table 自帶分頁

但如果想要更加復雜的分頁,例如顯示總數(shù),改變每頁個數(shù)等等功能,則需要傳入pagination參數(shù)來自定義,看代碼:

<a-table :datasource="data" 
	:columns="columns" 
	:pagination="pagination"/>

<script>
const data=[...]
const columns=[...]
export default {
	data() {
		return {
			data,
			columns,
			pagination: {
				pageSize: 20, // 默認每頁顯示數(shù)量
				showSizeChanger: true, // 顯示可改變每頁數(shù)量
				pageSizeOptions: ['10', '20', '30', '40'], // 每頁數(shù)量選項
				showTotal: total => `Total ${total} items`, // 顯示總數(shù)
				showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改變每頁數(shù)量時更新顯示
			}
		}
	}
}
</script>

還有更多的配置可以自行設置,按照這個形式就好。

效果圖:

在這里插入圖片描述

ant.design.vue中table的使用說明

table的創(chuàng)建

<a-table
? :columns="columns" // 表頭
? :dataSource="data" // 數(shù)據(jù)源
? :loading='loading' // 加載loading
? :pagination="pagination" ?// 頁腳
? :scroll="scroll" // 控制table的滾動
? :rowKey="setTableKey" // 每一行定義一個單獨的key
? :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" //?
? :customRow="customClick" // 點擊每一行的事件
? @change="handleTableChange" // 表格的change事件
? >
? <span slot="action" slot-scope="record">
? ? ?// slot="action" 插槽名
? ? ?// slot-scope="record" // 該插槽內(nèi)部能搞抓取到的改行的數(shù)據(jù)
? ? ?// 也可展示改行對應的內(nèi)容 {{ record.name }}
? ? <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  ?@click.stop="editHandle(record)">編輯</a>
? ? <a-divider type="vertical"/>
? ? <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click.stop="deleteRecord(record)">刪除</a>
? </span>
</a-table>

table之columns

表格的表頭數(shù)據(jù)源

columns: [
? {
? ? title: '性別', // 該列展示的title
? ? dataIndex: 'sex', // 對應標志,與dataSource中數(shù)據(jù)匹配的標識符,支持"info.sex"的方式
? ? filters: [ // 篩選功能,該數(shù)組表示刷選的選項值,change事件獲取的為 value,text為展示內(nèi)容
? ? ? { text: '男', value: 'male' },
? ? ? { text: '女', value: 'female' },
? ? ],
? ? filterMultiple: false, // false為單選
? ? filteredValue: [], // 受控狀態(tài),加上它時,則需要在change事件中,手動的給它賦值,
? ? // 它表示選中的數(shù)據(jù),對應的數(shù)據(jù)高亮,可以手動清除狀態(tài)
? },
? {
? ? title: '登記日期',
? ? dataIndex: 'registDate',?
? ? sorter: true, // true,表示該列出現(xiàn)排序icon,在change事件中,能監(jiān)聽到對應的數(shù)據(jù)變化
? },
? {
? ? width: '100px', // 該列的寬度,支持百分比等
? ? title: '操作',
? ? key: 'action',
? ? dataIndex: '',
? ? fixed: 'right',
? ? scopedSlots: { customRender: 'action' }, // customRender 對應table中的插槽名,可以在每行自定義展示的內(nèi)容,
? },
],

table之dataSource

表格的數(shù)據(jù)源

[{
? id: '1',
? sex: 'John Brown',
? age: 32,
? registDate: '2019-05-09',
}]

table之loading

頁面是否加載中

  • boolean
  • table之pagination
pagination: {
? // 分頁配置器
? pageSize: 10, // 一頁的數(shù)據(jù)限制
? current: 1, // 當前頁
? total: 10, // 總數(shù)
? hideOnSinglePage: false, // 只有一頁時是否隱藏分頁器
? showQuickJumper: true, // 是否可以快速跳轉(zhuǎn)至某頁
? showSizeChanger: true, // 是否可以改變 pageSize
? pageSizeOptions: ['5', '10', '30'], // 指定每頁可以顯示多少條
? // onShowSizeChange: (current, pagesize) => { // 改變 pageSize時的回調(diào)
? // ? this.pagination.current = current
? // ? this.pagination.pageSize = pagesize
? // ? ....
? // },
? // onChange: (current) => { // 切換分頁時的回調(diào),
? // 當在頁面定義change事件時,切記要把此處的事件清除,因為這兩個事件重疊了,可能到時候會導致一些莫名的bug
? // ? this.pagination.current = current
? // },
? showTotal: total => `總數(shù):${total}人`, // 可以展示總數(shù)
},

table之scroll

設置橫向或縱向滾動,也可用于指定滾動區(qū)域的寬和高,建議為 x 設置一個數(shù)字,如果要設置為 true,需要配合樣式 .ant-table td { white-space: nowrap; }

{ x: number , y: number }

一般用于大數(shù)據(jù)展示時,讓橫向出現(xiàn)滾動的效果,主要用來兼容小屏幕

也可以固定某一列,在columns中對應的列添加fixed: 'right',

不過我們也可以動態(tài)的設置

// 在頁面初始化的時候調(diào)用事件,去判斷該如何展示
const screenWidth = document.body.clientWidth
if (screenWidth >= 1366 && this.screenWidth <= 1540) {
? this.scroll.x = '115%'
} else if (screenWidth < 1366) {
? this.scroll.x = '125%'
}

table之rowKey

表格行 key 的取值,可以是字符串或一個函數(shù)

處理多選至關(guān)重要一項,只有設置了該屬性,多選時,選中的值才會出現(xiàn)對應的高亮

// table中使用
:rowKey={record => record.uid}
// 事件
setTableKey(record) {
? return record.id
}

table之rowSelection

列表項是否可選擇,也就是通常的多選

  • selectedRowKeys:數(shù)組,受控的選中狀態(tài),可以通過它,手動添加選中行,當選中時,將已選中的數(shù)據(jù)賦值給該值;
  • onChange: 選中的change事件

table之customRow

設置行屬性,已經(jīng)對應的事件

// 點擊行,展示對應的數(shù)據(jù),寫在data中
customClick: record => ({
? on: { // 事件
? ? click: () => {
? ? ? // 點擊改行時要做的事情
? ? ? // ......
? ? },
? },
}),

table之change

分頁、排序、篩選變化時觸發(fā)

handleTableChange(pagination, filters, sorter) {
? console.log(pagination, filters, sorter)
}

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理

    vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理

    這篇文章主要為大家介紹了vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • moment轉(zhuǎn)化時間戳出現(xiàn)Invalid Date的問題及解決

    moment轉(zhuǎn)化時間戳出現(xiàn)Invalid Date的問題及解決

    這篇文章主要介紹了moment轉(zhuǎn)化時間戳出現(xiàn)Invalid Date的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • .vue文件 加scoped 樣式不起作用的解決方法

    .vue文件 加scoped 樣式不起作用的解決方法

    本篇文章主要介紹了.vue文件 加scoped 樣式不起作用的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue/cli3版本打包如何去掉soucemap文件

    vue/cli3版本打包如何去掉soucemap文件

    這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • 詳解vee-validate的使用個人小結(jié)

    詳解vee-validate的使用個人小結(jié)

    本篇文章主要介紹了詳解vee-validate的使用個人小結(jié),具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-06-06
  • Vue el-upload單圖片上傳功能實現(xiàn)

    Vue el-upload單圖片上傳功能實現(xiàn)

    這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-11-11
  • 詳解Vue2 添加對scss的支持

    詳解Vue2 添加對scss的支持

    這篇文章主要介紹了詳解Vue2 添加對scss的支持,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue el-row中ul間距問題

    vue el-row中ul間距問題

    這篇文章主要介紹了vue el-row中ul間距問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue3中導入和使用組件幾種常見方法(.vue文件)

    Vue3中導入和使用組件幾種常見方法(.vue文件)

    組件是Vue.js最強大的功能之一, 組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導入和使用組件幾種常見方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-09-09
  • Vuejs從數(shù)組中刪除元素的示例代碼

    Vuejs從數(shù)組中刪除元素的示例代碼

    這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02

最新評論