Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue3 how to limit the number of table table options related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that you read this vue3 how to limit the number of table table options article will have a harvest, let's take a look at it.

Problem description

Tip: describe the specific problem here: we will more or less limit the number of table tables, there are only single or multi-selection styles on the normal table, and there is no attribute to add up to several options in the multi-selection.

For example, I only want to select two items in the table table.

Cause analysis:

Tip: fill in the analysis of the problem here: the current quasar framework does not support the selection of the number, so you can only implement it by yourself.

Solution:

Tip: fill in the specific solution to the problem here: there is a property in the selection box that is selected-rows-label, which is triggered when the selection box is clicked. Use this attribute to control the number. The principle is to bind a data in table, and when an option is checked, the selected data will be added to the data, which in turn triggers the selected-rows-label property, which binds a function to implement the length of the data property in the function. Set to 2 when the data length is greater than 2. This enables you to control the number of options.

For example, here is the experiment I have done. When table can select this data, you only need to select two items.

Here is the page code:

Selected: {{JSON.stringify (selected)}}

The following js code:

Const {ref} = Vueconst 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% Ice cream sandwich', calories, 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 = 2percent * 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 ('# QMurappapp') this is the end of the article on "how vue3 limits the number of options for table tables". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how vue3 limits the number of options for table forms". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.