vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法

更新時(shí)間：2022年04月14日 16:55:53 作者：前端小白到專家

這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

問題描述

提示：這里描述具體問題：我們再用table表格的時(shí)候多多少少都會有限制個(gè)數(shù)的時(shí)候，在正常的表格上只有單選或或者多選的樣式，沒有在多選里面添加最多選幾個(gè)選項(xiàng)的屬性。

例如：我在table表格中只想選擇兩項(xiàng)。

原因分析：

提示：這里填寫問題的分析：當(dāng)前quasar框架不支持個(gè)數(shù)選擇，只能自己來實(shí)現(xiàn)。

解決方案：

提示：這里填寫該問題的具體解決方案：在選擇框中有一個(gè)屬性是selected-rows-label，這個(gè)數(shù)屬性是當(dāng)有選擇框被點(diǎn)中的時(shí)候就會觸發(fā)。利用這個(gè)屬性來控制個(gè)數(shù)。原理是，在table中綁定一個(gè)數(shù)據(jù)，當(dāng)勾選了一個(gè)選項(xiàng)時(shí)就會把選擇的數(shù)據(jù)添加到這個(gè)數(shù)據(jù)中，進(jìn)而會觸發(fā)selected-rows-label屬性，這個(gè)屬性綁定一個(gè)函數(shù)，在函數(shù)中實(shí)現(xiàn)數(shù)據(jù)屬性的長度。當(dāng)數(shù)據(jù)長度大于2的時(shí)候就設(shè)置為2。這樣就實(shí)現(xiàn)控制選項(xiàng)個(gè)數(shù)。

例如：下面就是我做的實(shí)驗(yàn)。在table可選這數(shù)據(jù)的時(shí)候限制只需選擇兩項(xiàng)。

下面是頁面代碼：

<div id="q-app" style="min-height: 100vh;">
? <div class="q-pa-md">
? ? <q-table
? ? ? title="Treats"
? ? ? :rows="rows"
? ? ? :columns="columns"
? ? ? row-key="name"
? ? ? :selected-rows-label="getSelectedString"
? ? ? selection="multiple"
? ? ? v-model:selected="selected"
? ? ></q-table>

? ? <div class="q-mt-md">
? ? ? Selected: {{ JSON.stringify(selected) }}
? ? </div>
? </div>
</div>

下面js代碼：

const { ref } = Vue

const columns = [
? {
? ? name: 'desc',
? ? required: true,
? ? label: 'Dessert (100g serving)',
? ? align: 'left',
? ? field: row => row.name,
? ? format: val => `${val}`,
? ? sortable: true
? },
? { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
? { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
? { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
? { name: 'protein', label: 'Protein (g)', field: 'protein' },
? { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
? { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
? { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
]

const rows = [
? {
? ? name: 'Frozen Yogurt',
? ? calories: 159,
? ? fat: 6.0,
? ? carbs: 24,
? ? protein: 4.0,
? ? sodium: 87,
? ? calcium: '14%',
? ? iron: '1%'
? },
? {
? ? name: 'Ice cream sandwich',
? ? calories: 237,
? ? fat: 9.0,
? ? carbs: 37,
? ? protein: 4.3,
? ? sodium: 129,
? ? calcium: '8%',
? ? iron: '1%'
? },
? {
? ? name: 'Eclair',
? ? calories: 262,
? ? fat: 16.0,
? ? carbs: 23,
? ? protein: 6.0,
? ? sodium: 337,
? ? calcium: '6%',
? ? iron: '7%'
? },
? {
? ? name: 'Cupcake',
? ? calories: 305,
? ? fat: 3.7,
? ? carbs: 67,
? ? protein: 4.3,
? ? sodium: 413,
? ? calcium: '3%',
? ? iron: '8%'
? },
? {
? ? name: 'Gingerbread',
? ? calories: 356,
? ? fat: 16.0,
? ? carbs: 49,
? ? protein: 3.9,
? ? sodium: 327,
? ? calcium: '7%',
? ? iron: '16%'
? },
? {
? ? name: 'Jelly bean',
? ? calories: 375,
? ? fat: 0.0,
? ? carbs: 94,
? ? protein: 0.0,
? ? sodium: 50,
? ? calcium: '0%',
? ? iron: '0%'
? },
? {
? ? name: 'Lollipop',
? ? calories: 392,
? ? fat: 0.2,
? ? carbs: 98,
? ? protein: 0,
? ? sodium: 38,
? ? calcium: '0%',
? ? iron: '2%'
? },
? {
? ? name: 'Honeycomb',
? ? calories: 408,
? ? fat: 3.2,
? ? carbs: 87,
? ? protein: 6.5,
? ? sodium: 562,
? ? calcium: '0%',
? ? iron: '45%'
? },
? {
? ? name: 'Donut',
? ? calories: 452,
? ? fat: 25.0,
? ? carbs: 51,
? ? protein: 4.9,
? ? sodium: 326,
? ? calcium: '2%',
? ? iron: '22%'
? },
? {
? ? name: 'KitKat',
? ? calories: 518,
? ? fat: 26.0,
? ? carbs: 65,
? ? protein: 7,
? ? sodium: 54,
? ? calcium: '12%',
? ? iron: '6%'
? }
]

const app = Vue.createApp({
? setup () {
? ? const selected = ref([])

? ? return {
? ? ? selected,
? ? ? columns,
? ? ? rows,

? ? ? getSelectedString () {
? ? ? ? if(selected.value.length > 2){
? ? ? ? ? **selected.value.length = 2**
? ? ? ? ? return 0
? ? ? ? } else {
? ? ? ? ? return selected.value.length === 0 ? '' : `${selected.value.length} record${selected.value.length > 1 ? 's' : ''} selected of ${rows.length}`
? ? ? ? }
? ? ? ??
? ? ? }
? ? }
? }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: