vue3种table表格选项个数的控制方法


Posted in Vue.js onApril 14, 2022

问题描述

提示:这里描述具体问题:我们再用table表格的时候多多少少都会有限制个数的时候,在正常的表格上只有单选或或者多选的样式,没有在多选里面添加最多选几个选项的属性。

例如:我在table表格中只想选择两项。

vue3种table表格选项个数的控制方法

原因分析:

提示:这里填写问题的分析:当前quasar框架不支持个数选择,只能自己来实现。

解决方案:

提示:这里填写该问题的具体解决方案:在选择框中有一个属性是selected-rows-label,这个数属性是当有选择框被点中的时候就会触发。利用这个属性来控制个数。原理是,在table中绑定一个数据,当勾选了一个选项时就会把选择的数据添加到这个数据中,进而会触发selected-rows-label属性,这个属性绑定一个函数,在函数中实现数据属性的长度。当数据长度大于2的时候就设置为2。这样就实现控制选项个数。

例如:下面就是我做的实验。在table可选这数据的时候限制只需选择两项。

下面是页面代码:

<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')
Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
You might like
PHP提取中文首字母
2008/04/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python验证码识别的实例详解
2016/09/09 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
python django model联合主键的例子
2019/08/06 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Python实现自动整理文件的脚本
2020/12/17 Python
python绘制汉诺塔
2021/03/01 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
幼儿园毕业园长感言
2014/02/24 职场文书
小学班主任培训方案
2014/06/04 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
业务员辞职信范文
2015/03/02 职场文书
婚宴致辞
2015/07/28 职场文书
高三数学教学反思
2016/02/18 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis