多格筛选 (bui-grid-select)

多格筛选(bui-grid-select) - 图1   多格筛选(bui-grid-select) - 图2

用法

  1. <bui-grid-select
  2.         :items="testData1"
  3.         :single=true
  4.         @overLimit="onOverLimit"
  5.         @select="_click"></bui-grid-select>
  6. <bui-grid-select
  7.     :items="testData2"
  8.     :limit="3"
  9.     @overLimit="overLimit"
  10.     @select="_click2"></bui-grid-select>
  11. <bui-grid-select
  12.     :cols="5"
  13.     :single=true
  14.     :items="testData3"
  15.     :customStyles="customStyles"
  16.     @select="_click3"></bui-grid-select>
  1. data: function () {
  2.     return {
  3.         testData1: [
  4.             {
  5.                 'title': '云应用平台',
  6.                 'disabled': true
  7.             },
  8.             {
  9.                 'title': '云应用产品',
  10.                 'selected': true
  11.             },
  12.             {
  13.                 'title': '轨道交通'
  14.             },
  15.             {
  16.                 'title': '轨道交通'
  17.             },
  18.             {
  19.                 'title': '财政'
  20.             },
  21.             {
  22.                 'title': '人力资源'
  23.             },
  24.             {
  25.                 'title': '展示一行'
  26.             },
  27.             {
  28.                 'title': '超过一行文本将被截断展示'
  29.             },
  30.             {
  31.                 'title': '超过一行文本将被截断展示'
  32.             },
  33.             {
  34.                 'title': '轨道交通'
  35.             },
  36.         ],
  37.         testData2: [
  38.             {
  39.                 'disabled': true,
  40.                 'title': '云应用平台'
  41.             },
  42.             {
  43.                 'title': '云应用产品',
  44.                 'selected': true
  45.             },
  46.             {
  47.                 'title': '轨道交通'
  48.             },
  49.             {
  50.                 'title': '轨道交通'
  51.             },
  52.             {
  53.                 'title': '财政'
  54.             },
  55.             {
  56.                 'title': '人力资源'
  57.             },
  58.             {
  59.                 'title': '展示一行'
  60.             },
  61.             {
  62.                 'title': '超过一行文本将被截断展示'
  63.             },
  64.             {
  65.                 'title': '超过一行文本将被截断展示'
  66.             },
  67.             {
  68.                 'title': '轨道交通'
  69.             },
  70.         ],
  71.         customStyles: {
  72.             lineSpacing: '20px',
  73.             width: '130px',
  74.             height: '50px',
  75.             icon: '',
  76.             color: '#333333',
  77.             selectedColor: '#ffffff',
  78.             disabledColor: '#eeeeee',
  79.             borderColor: '#e8e8e8',
  80.             selectedBorderColor: '#3399ff',
  81.             backgroundColor: '#ffffff',
  82.             selectedBackgroundColor: '#3399ff'
  83.         },
  84.     }
  85. },
  86. methods: {
  87.     _click(e){
  88.         this.$toast(e.selectedList[0].title);
  89.     },
  90.     _click2(e){
  91.         this.$toast(this.testData2[e.selectIndex].title);
  92.     },
  93.     _click3(e){
  94.         this.$toast(this.testData3[e.selectIndex].title);
  95.     },
  96.     overLimit(e){
  97.         this.$toast(`最多选择${e}个`);
  98.     }
  99. }

Example:bui-grid-select

属性

Prop Type Required Default Description
items array Y 多格筛选数据项
single boolean N false 单项选择
limit number N 多项选择时的选择项的上限个数
cols string``number N 4 列数
customStyles object N 自定义属性

items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：

  • title ：选项文本
  • selected ：表明该选项是否为选中, true为选中、false为不选中、默认值为false

customStyles: 自定义属性，传一个对象，属性如下：

  • width ：多格筛选单个宽度
  • height ：多格筛选单个高度
  • color ：正常状态文字色
  • selectedColor ：选中状态文字色，默认为#3399ff
  • disabledColor ：不可选字体颜色，默认为#9b9b9b
  • borderColor ：正常状态边框色，默认为是透明
  • selectedBorderColor ：选中状态边框色，默认为#3399ff
  • backgroundColor ：正常状态背景色，默认为#f6f6f6
  • selectedBackgroundColor ：选中状态背景色 ，默认为#ffffff

事件

  • @overLimit:点击某项触发的事件，当超过上限数量时触发的事件，返回上限数量
  • @select:点击某项触发的事件，返回索引、当前选项的选择状态、当前索引选项