checklist 多选

Props

参数 说明 类型 默认值
title 选项标题 String
required 可选,是否为必选项 Boolean true
options 选项数组 Array
value 可选,已选择条目值 Array
max 可选,至多选择条目个数 Number
min 可选,至少选择条目个数 Number
random-order 可选,是否打乱条目排序 Boolean false

当设置required=false时,min设置将无效,即最少选定个数为0

Events

名字 参数 说明
on-change val value值改变触发

Demo

基本使用



<template>
<checklist title="请选择你的爱好" :options="hobbies" :value="hobby" @change="change"></checklist>
</template>
<script>
export default {
  data () {
      return {
          hobbies: ['篮球', '足球', '羽毛球', '打飞机'],
          hobby: ['打飞机']
      }
  },
  methods: {
      change (val) {
          console.log('change', val)
      }
  }
}
</script>

设定选择条目个数



<template>
<checklist title="至多选择两项" :options="items" :value="selectedItems" :max="2" :required="false" @change="change"></checklist>
</template>
<script>
export default {
  data () {
    return {
      items: ['篮球', '足球', '羽毛球', '台球'],
      selectedItems: []
    }
  },
  methods: {
    change (val) {
      console.log("change", val)
    }
  }
}
</script>

key-value类型数组展示

每个条目的key必须为字符串



<template>
<checklist title="Please select" :options="objectList" :value="objectListValue" @change="change"></checklist>
</template>
<script>
export default {
    data () {
        return {
            objectList: [{key: '1', value: '001 value'}, {key: '2', value: '002 value'}, {key: '3', value: '003 value'}],
            objectListValue: ['1', '2']
        }
    },
    methods: {
        change (val) {
           console.log('change', val)
       }
    }
}
</script>

打乱展示顺序



<template>
<checklist title="随机顺序显示" :options="items" :value="selectedItems" random-order @change="change"></checklist>
</template>
<script>
export default {
  data () {
    return {
      items: ['篮球', '足球', '羽毛球', '台球'],
      selectedItems: []
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
}
</script>

results matching ""

    No results matching ""