温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3怎么限制table表格选项个数

发布时间:2022-04-15 10:22:56 阅读:274 作者:iii 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍了vue3怎么限制table表格选项个数的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3怎么限制table表格选项个数文章都会有所收获,下面我们一起来看看吧。

问题描述

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

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

vue3怎么限制table表格选项个数

原因分析:

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

解决方案:

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

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

下面是页面代码:

<div id="q-app" >
  <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',
    requiredtrue,
    label'Dessert (100g serving)',
    align'left',
    fieldrow => row.name,
    formatval => `${val}`,
    sortabletrue
  },
  { name'calories'align'center'label'Calories'field'calories'sortabletrue },
  { name'fat'label'Fat (g)'field'fat'sortabletrue },
  { 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'sortabletruesort(a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name'iron'label'Iron (%)'field'iron'sortabletruesort(a, b) => parseInt(a, 10) - parseInt(b, 10) }
]

const rows = [
  {
    name'Frozen Yogurt',
    calories159,
    fat6.0,
    carbs24,
    protein4.0,
    sodium87,
    calcium'14%',
    iron'1%'
  },
  {
    name'Ice cream sandwich',
    calories237,
    fat9.0,
    carbs37,
    protein4.3,
    sodium129,
    calcium'8%',
    iron'1%'
  },
  {
    name'Eclair',
    calories262,
    fat16.0,
    carbs23,
    protein6.0,
    sodium337,
    calcium'6%',
    iron'7%'
  },
  {
    name'Cupcake',
    calories305,
    fat3.7,
    carbs67,
    protein4.3,
    sodium413,
    calcium'3%',
    iron'8%'
  },
  {
    name'Gingerbread',
    calories356,
    fat16.0,
    carbs49,
    protein3.9,
    sodium327,
    calcium'7%',
    iron'16%'
  },
  {
    name'Jelly bean',
    calories375,
    fat0.0,
    carbs94,
    protein0.0,
    sodium50,
    calcium'0%',
    iron'0%'
  },
  {
    name'Lollipop',
    calories392,
    fat0.2,
    carbs98,
    protein0,
    sodium38,
    calcium'0%',
    iron'2%'
  },
  {
    name'Honeycomb',
    calories408,
    fat3.2,
    carbs87,
    protein6.5,
    sodium562,
    calcium'0%',
    iron'45%'
  },
  {
    name'Donut',
    calories452,
    fat25.0,
    carbs51,
    protein4.9,
    sodium326,
    calcium'2%',
    iron'22%'
  },
  {
    name'KitKat',
    calories518,
    fat26.0,
    carbs65,
    protein7,
    sodium54,
    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')

关于“vue3怎么限制table表格选项个数”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3怎么限制table表格选项个数”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×