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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue实现在data里引入相对路径
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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JavaScript的Cookies
2008/01/16 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python bytes string相互转换过程解析
2020/03/05 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
风险评估实施方案
2014/03/09 职场文书
离婚协议书范本2014
2014/10/27 职场文书
学校运动会加油词
2015/07/18 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书