您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
深圳小产权房       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
vue3限制table表格选项个数的解决方法
内容摘要: divid='q-app'style='min-height:100vh;'divclass='q-pa-md'q-tabletitle='Treats':rows='rows':columns='columns'row-key='name':selected-rows-label='getSelectedString'selection='multiple......
<divid="q-app"style="min-height:100vh;">

<divclass="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>

<divclass="q-mt-md">

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

</div>

</div>

</div>

下面js代码:

const{ref}=Vue

constcolumns=[

{

name:'desc',

required:true,

label:'Dessert(100gserving)',

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)}

]

constrows=[

{

name:'FrozenYogurt',

calories:159,

fat:6.0,

carbs:24,

protein:4.0,

sodium:87,

calcium:'14%',

iron:'1%'

},

{

name:'Icecreamsandwich',

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:'Jellybean',

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%'

}

]

constapp=Vue.createApp({

setup(){

constselected=ref([])

return{

selected,

columns,

rows,

getSelectedString(){

if(selected.value.length>2){

**selected.value.length=2**

return0

}else{

returnselected.value.length===0?'':`${selected.value.length}record${selected.value.length>1?'s':''}selectedof${rows.length}`

}

}

}

}

})

app.use(Quasar,{config:{}})

app.mount('#q-app')

上一篇:Ajax实现上传图像功能的示例详解 下一篇:JavaScript实现网页版贪吃蛇游戏
发布日期:2022/4/14
手机扫二维码直达本页
发布时间:21:15:19
点击:353
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022