Question

import { Checklist } from 'feui';
components: {
  [Checklist.name]: Checklist
},
data () {
  return {
    checklist001: [],
    commonList: [ '安徽', '浙江', '北京' ],
    checklist002: [ '安徽', '浙江' ],
    checklist003: [ '安徽', '浙江' ],
    checklist005: [ '01', '02', '03' ],
    objectList: [{key: '1', value: '001 value'}, {key: '2', value: '002 value'}, {key: '3', value: '003 value'}],
    objectListValue: ['1', '2'],
    inlineDescList: [
      {key: '1', value: 'Tiger is good', inlineDesc: 'Tiger is the king of mountain'},
      {key: '2', value: 'Lion is better', inlineDesc: 'Lion is the king of woods'},
      {key: '3', value: 'Camel is best, no inline-desc'}
    ],
    inlineDescListValue: [1],
    asyncList: [],
    asyncListValue: [],
    radioValue: ['安徽']
  }
},
methods:{
  change (val) {
    console.log('change', val)
  }
}

代码演示

基础用法

<fe-checklist title="基础用法" 
  :label-position="labelPosition" 
  required :options="commonList" 
  v-model="checklist001" 
  @on-change="change">
</fe-checklist>

禁用操作

<fe-checklist title="默认选中 安徽 和 浙江 (禁用操作)" 
  disabled label-position="left" 
  :options="commonList" 
  v-model="checklist002" @on-change="change">
</fe-checklist>

最多选2个

<fe-checklist title="最多选2个" 
  :options="commonList" v-model="checklist003" 
  :max=2 @on-change="change">
</fe-checklist>

单选模式

<fe-checklist title="只能选一个(单选模式)" 
  :options="commonList" 
  v-model="radioValue" 
  :max="1" @on-change="change">
</fe-checklist>

乱序模式

<fe-checklist title="打乱选项顺序" 
  random-order :options="checklist005" 
  v-model="checklist005Value" 
  @on-change="change">
</fe-checklist>

Object 类型的选项列表

<fe-checklist ref="demoObject" 
  itle="使用 Object 类型的选项列表，key 必须为字符串" 
  :options="objectList" v-model="objectListValue" 
  @on-change="change">
</fe-checklist>

包含 inlineDesc 属性的 Object 类型选项列表

<fe-checklist title="包含 inlineDesc 属性的 Object 类型选项列表" 
  :options="inlineDescList" v-model="inlineDescListValue" 
  @on-change="change">
</fe-checklist>

异步选项列表

<fe-checklist title="异步选项列表" :max="3" 
  :options="asyncList" v-model="asyncListValue" 
  @on-change="change">
</fe-checklist>

API

参数	说明	类型	默认值	可选值
value	表单值	Array	-	-
title	标题	String	-	-
required	是否必选	Boolean	false	true,false
options	选项列表，可以为[{key:’name’,value:’value’,inlineDesc:’inlineDesc’}]的形式	Array	-	-
min	最少可选个数	Number	-	-
max	最多可选个数	Number	-	-
random-order	是否随机打乱排列	Boolean	false	true,false
check-disabled	是否进行可选检测，默认情况下当选择个数等于可选个数(max)时，其他项不可选择。 该选项主要适用于从多个选项列表中收集值的场景。 注意的该选项设为 false 时 max 设 置将失效。	Boolean	true	true,false
label-position	label 位置	String	right	left,right
disabled	是否禁用	String	-	-
-	-	-	-	-

Events

事件名	参数	说明	备注
on-change	value, label	值变化时触发	-
-	-	-	-

Methods

方法名	参数	说明	备注
getFullValue	-	获取值和对应的显示文字	-
-	-	-	-