序文
最近、新しいプロジェクトを書いていました。私は UI フレームワークを使用しましたAnt Design Vue。これまで使用していたためElement UI、このコンポーネント ライブラリを使用したことがありませんでした。2 つの違いがこれほど大きいとは予想していなかったので、次の手順を実行しました。Tableと を含む多くの落とし穴については、Pagination時間がかかりました。時間をかけて解決し、この経験を記録し、ここで共有してください。
注: これは Vue3 プロジェクトです。
1.表形式
Table使い方は比較的簡単で、 と違ってElement多くのタグを書く必要はなく、主にデータを通じて一覧表示を変更するだけです。
テーブルの列タイトルとデータは2 つの配列で制御され、名前は任意ですcolumns。dataそれをそれぞれフォームcolumnsとdata-sourceオブジェクトに渡すだけです。
注: 配列内のキー値には、タイトルが である必要がある、 がtitle値columnsの名前でkeyあるなど、特定の要件があります。data特定のフィールド名については公式ドキュメントを参照する必要があるため、この記事では詳しく説明しません。
<script setup lang='ts'>
import {
ref } from 'vue';
const columns = ref([{
title: '标题',
dataIndex: 'name',
key: 'name',
},{
title: '时间',
dataIndex: 'date',
key: 'date',
}])
const data = ref([{
key: 1,
name: 'Ant Design Vue表格',
year: '2023年',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination"></a-table>
</template>
上記は通常のデータ表示ですが、場合によってはボタンなどのロジック処理を行う必要があり、この場合はそれを使用して処理する必要があります<template></template>。
<template></template>ここでは 2 つの層が必要であり、外側の層は処理する必要がある名前付きスロットであるためbody、追加する必要があることに注意してください#bodyCell="{ column }"。
.vue
<script setup lang='ts'>
import {
ref } from 'vue';
const columns = ref([{
title: '考核名称',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名称',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名称',
dataIndex: 'name',
key: 'name',
}])
const data = ref([{
key: 1,
name: '测试',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination">
<template #bodyCell="{ column }">
<template v-if="column.key === 'status'">
<dsa-tag type="warn">已完成</dsa-tag>
</template>
<template v-else-if="column.key === 'operate'">
<a class="button">编辑</a>
</template>
</template>
</a-table>
</template>
2、ページネーション ページネーション
上記のコードから、テーブル内でページング コンポーネントが使用されていないことがわかりますが、ページ番号は表示されたままです。これは便利だと思われるかもしれませんが、実際には、この方法では多くの機能を実現できなくなります。したがって、ページネーションのカスタム処理が必要です。
と同様にTable、ページングもデータによって制御されます。これは、テーブルがデフォルトでページングをすでに使用しているため、追加でページングを導入する必要はありません。:pagination="pagination"ただし、ページネーションを制御するデータを指定するには、テーブルに追加する必要があります。
.vue
<script setup lang='ts'>
import {
ref } from 'vue';
const pagination = ref({
current: 1,
defaultPageSize: 10,
total: 11,
showTotal: () => `共 ${
11} 条`
})
const columns = ref([{
title: '考核名称',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名称',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名称',
dataIndex: 'name',
key: 'name',
}])
const data = ref([{
key: 1,
name: '测试',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination">
<template #bodyCell="{ column }">
<template v-if="column.key === 'status'">
<dsa-tag type="warn">已完成</dsa-tag>
</template>
<template v-else-if="column.key === 'operate'">
<a class="button">编辑</a>
</template>
</template>
</a-table>
</template>
ページネーションの設定項目は多数あります。詳しくは公式ドキュメントPagination ページネーションを参照してください。
終わり