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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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和MySql来与ODBC数据连接
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php微信公众平台开发类实例
2015/04/01 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
动态表格Table类的实现
2009/08/26 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
numpy库reshape用法详解
2020/04/19 Python
为什么称python为胶水语言
2020/06/16 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
Python如何定义一个函数
2015/09/01 面试题
房产销售经理职责
2013/12/20 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
大学生安全责任书
2014/07/25 职场文书
英文版辞职信
2015/02/28 职场文书
业务员岗位职责范本
2015/04/03 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers