如何设置可勾选列表Checklist_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

列表的勾选操作。

在一组列表项中选择一个或多个。
可勾选列表的使用需要默认至少勾选一项，方便用户了解列表是可以勾选的。

属性

属性	说明	类型	必填	默认值
value	选中数据	string \| number (string \| )[]	否	-
options	ChecklistItem 数据，配置每一列的选项	ChecklistItem[]	否	[]
multiple	是否支持多选	boolean	否	false
className	类名	string	否	-

ChecklistItem

属性	说明	类型	必填	默认值
title	标题	string	是	-
value	值	string \| value	是	-
image	图片	string	否	-
description	描述	string	否	-
disabled	是否禁用	boolean	类名	false
readOnly	是否只读	boolean	类名	false

事件

事件名	说明	类型
onChange	选中项发生变化，触发回调	`(value:string\|number\|[], column: ChecklistItem)=>void`

插槽

名称	说明	类型
content	CheckListItem 自定义样式	作用域插槽，接收选中的 item 参数
icon	自定义选中 Icon	-

样式类

类名	说明
amd-checklist	可勾选列表样式
amd-checklist-item-content	可勾选列表内容样式
amd-checklist-item-text	可勾选列表内容标题样式
amd-checklist-item-image	可勾选列表内容图片样式
amd-checklist-item-text-description	可勾选列表内容描述样式
amd-checklist-item-check-icon	可勾选列表内容选中Icon样式

代码示例

基本使用

index.axml 的代码示例如下：

<demo-block title="简单布局-单选" padding="0">
  <checklist 
    value="{{1}}"
    options="{{options_1}}"
    onChange="onChange"
  />
</demo-block>

<demo-block title="复杂布局-多选"  padding="0">
  <checklist 
    value="{{value}}" 
    options="{{options_2}}"
    multiple
    onChange="onChange"
  />
</demo-block>
<demo-block title="禁用状态" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_3}}"
    multiple
    onChange="onChange"
  />
</demo-block>

<demo-block title="只读状态" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_4}}"
    multiple
    onChange="onChange"
  />
</demo-block>
<demo-block title="自定义勾选图标&&组件内容" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_3}}"
    multiple
    onChange="onChange"
  >
    <view slot="icon">
      <icon color='red' type="LikeOutline" size="x-small" class="demo-checklist-checked-icon"/>
    </view>
    <view slot="content" slot-scope="props">
      title: {{props.item.title}}
    </view>
  </checklist>
</demo-block>

index.js 的代码示例如下：

Page({
  data: {
    value: [1, 2],
    options_1: [
      {
        value: 1,
        title: '可勾选列表项1'
      },
      {
        value: 2,
        title: '可勾选列表项2'
      },
      {
        value: 3,
        title: '可勾选列表项3'
      }
    ],
    options_2: [
      {
        value: 1,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "这里是描述信息",
        title: '可勾选列表项1'
      },
      {
        value: 2,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "这里是描述信息",
        title: '可勾选列表项2'
      },
      {
        value: 3,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "这里是描述信息",
        title: '可勾选列表项3'
      }
    ],
    options_3: [
      {
        value: 1,
        title: '可勾选列表项1'
      },
      {
        value: 2,
        title: '禁用列表项2',
        disabled: true
      },
      {
        value: 3,
        title: '可勾选列表项3'
      }
    ],
    options_4: [
      {
        value: 1,
        title: '可勾选列表项1'
      },
      {
        value: 2,
        title: '只读列表项2',
        readOnly: true
      },
      {
        value: 3,
        title: '可勾选列表项3'
      }
    ]
  },
  onChange(v) {
    console.log('当前选中的值为：', v)
  }
})

index.acss 的代码示例如下：

.demo-checklist-label {
  font-size: 32rpx;
  color: #999;
  padding: 36rpx 0 16rpx 16rpx;
}

.demo-checklist-checked-icon {
  font-size: 36rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Checklist",
  "usingComponents": {
    "checklist": "antd-mini/es/Checklist/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}