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实现点击当前行变色
Dec 14 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
nginx下安装php7+php5
2016/07/31 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
新闻内页-JS分页
2006/06/07 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python去除字符串中的换行符
2017/10/11 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
劲霸男装广告词
2014/03/21 职场文书
西岭雪山导游词
2015/02/06 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python