<script>
    export default {
        data(){
            return {
                options:['土豆','西红柿','香蕉'],
                checked:['西红柿'],
                disableOptions:['香蕉'],
                options2:[{
                    name:'lj',
                    value:'辣椒'
                },{
                    name:'pg',
                    value:'苹果'
                },{
                    name:'bc',
                    value:'白菜'
                },{
                    name:'hlb',
                    value:'红萝卜'
                }],
                checked2:[{
                    name:'bc',
                    value:'白菜'
                }],
                disableOptions2:[{
                    name:'pg',
                    value:'苹果'
                }]
            }
        },
        methods:{
            onChange(object){
                // console.log("object::::",JSON.stringify(object))
            }
        },
        mounted(){
            setTimeout(()=>{
                this.checked = ['土豆']
                this.disableOptions = ['西红柿']
            },3000)
        }
    }
</script>
# CheckList

### 数组数据
:::demo
```html
<check-list :options="options" :checked="checked" :disable-options="disableOptions" :reverse="true" @on-change="onChange"></check-list>
```
```javaScript
<script>
     export default {
        data(){
            return {
                options:['土豆','西红柿','香蕉'],
                checked:['西红柿'],
                disableOptions:['香蕉']
            }
        },
        mounted(){
            setTimeout(()=>{
                this.checked = ['土豆']
                this.disableOptions = ['西红柿']
            },3000)
        }
    }
</script>
```
:::

### 对象数据
:::demo
```html
<check-list :options="options2" :checked="checked2" :disable-options="disableOptions2" :reverse="false" @on-change="onChange"></check-list>
```
```javaScript
<script>
    export default {
        data(){
            return {
                options2:[{
                    name:'lj',
                    value:'辣椒'
                },{
                    name:'pg',
                    value:'苹果'
                },{
                    name:'bc',
                    value:'白菜'
                },{
                    name:'hlb',
                    value:'红萝卜'
                }],
                checked2:[{
                    name:'bc',
                    value:'白菜'
                }],
                disableOptions2:[{
                    name:'pg',
                    value:'苹果'
                }]
            }
        }
    }
</script>
```
:::



### CheckList Attributes
| 参数      | 说明          | 类型      | 可选值       | 默认值  |
|---------- |------------- |---------------|------------  |-------- |
| options | 渲染数据 | `Array` | — | — |
| checked | 默认选中选项 | `Array` | — | — |
| disable-options | 禁用选项 | `Array` | — | — |

### CheckList Event
| 名称      |  参数       | 描述 |
|---------- |------------- |---------------|
| on-change | (Params) | — |


