选择框 CheckList

一组备选项中进行多选或者单选

基础用法

基础用法

配置一组数据源，可进行选择操作

<title>基础用法</title>
<describe>配置一组数据源，可进行选择操作</describe>
<template>
    <hc-check-list v-model="checked" :data="data"></hc-check-list>
</template>
<script>
export default {
  data: function() {
    return {
      checked: '1',
      data: [{
        text: '湖北',
        value: '1'
      }, {
        text: '湖南',
        value: '2'
      }, {
        text: '北京',
        value: '3'
      }, {
        text: '上海',
        value: '4'
      }]
    }
  }
}
</script>

多选框组

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<title>多选框组</title>
<describe>适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。</describe>
<template>
    <hc-check-list v-model="checked" :data="data" multiple></hc-check-list>
</template>
<script>
export default {
  data: function() {
    return {
      checked: '1',
      data: [{
        text: '湖北',
        value: '1'
      }, {
        text: '湖南',
        value: '2'
      }, {
        text: '北京',
        value: '3'
      }, {
        text: '上海',
        value: '4'
      }]
    }
  }
}
</script>

属性及事件

CheckList 属性

属性	说明	类型	可选值	默认值
value	当前值，支持v-model方式使用	string	--	--
data	备选项数据源	array	--	--
multiple	是否多选	boolean	--	false
viewable	是否查看状态	boolean	--	false
disabled	是否禁用	boolean	--	false

CheckList事件

事件	说明	参数
change	用户勾选时触发值改变事件	event.value：改变后的值

• 基础用法
• 多选框组
• 属性及事件
  • CheckList 属性
  • CheckList事件

登录