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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
10条php编程小技巧
2015/07/07 PHP
PHP如何使用Memcached
2016/04/05 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
JS实现li标签的删除
2019/04/12 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python 字符串操作方法大全
2014/03/11 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python如何进行时间处理
2020/08/06 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
预备党员思想汇报
2014/01/08 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
春风行动实施方案
2014/03/28 职场文书
推普周活动总结
2014/08/28 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书