SelectList 选择列表 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

一般用于带有选择性质的列表

规则

一般由选择器、主要信息、次要操作、次要信息组成。
主要信息和选择操作默认放在列表的左边，次要信息和次要操作放在列表的右边。
列表项采用flex布局，可以根据order自定义选择器和主要信息等位置

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {SelectList} from '@21cnfe/vui'  
Vue.component('SelectList', SelectList)

代码演示

SelectList 选择列表 selectLists

基本用法选择列表的类型（单选或多选），传入 List 数据，chosenIds 为选中项，edit 和 select 分别为点击操作区域及选中当前项的回调方法

//单选
<SelectList type="radio" :list="checklist" @edit="onEdit" @select="onSelect"></SelectList>
//多选
<SelectList type="checkbox" :list="checklist" @edit="onEdit" @select="onSelect"></SelectList>

禁用状态

<SelectList type="checkbox" :list="checklist" disabled></SelectList>
<SelectList type="radio" :list="checklist" disabled></SelectList>

隐藏选择器可以隐藏选择器成为普通列表

<SelectList hideChecked :list="checklist"></SelectList>

操作区域展示形态通过 operate 参数设置操作区域展示形态，操作区域调用 edit 回调方法

<template>
  <SelectList :list="checklist" :operate="operate1"></SelectList>
  <SelectList :list="checklist" :operate="operate2"></SelectList>
  <SelectList :list="checklist" :operate="operate3"></SelectList>
</template>
<script>
export default {
  data () {
    return {
      operate1: {
        text: '删除'
      },
      operate2: {
        icontype: 'ellipsis'
      },
      operate3: {
        img: require('../assets/delete.png')
      }
    }
  }
}
</script>

自定义顺序列表项采用 flex 布局，能够通过设置同级元素的 order 属性自定义顺序满足需求

<SelectList :list="checklist" class="custom-order"></SelectList>
<style>
.custom-order .am-selectlist-icon{
  order: 3;
}
.custom-order .am-selectlist-content{
  order: 2;
}
.custom-order .am-selectlist-thumb{
  order: 1;
  padding: 0 10px;
}
.custom-order .am-selectlist-extra{
  display: none;
}
.custom-order .am-progress{
  order: 4
}
</style>

使用插槽该组件提供匿名插槽以及作用域插槽，作用域插槽需使用 slot-scope 属性，调取数据使用 slot-scop.item ,如下示例

<SelectList hideChecked :list="customList" @edit="onEdit" class="custom-order" @select="onSelect">
  <Progress type="circle" slot-scope="scope" :percent="scope.item.percent"/>
</SelectList>

API

属性	说明	类型	默认值
`list`	列表的数据来源（id为必须项）	Array	`[{id: '--'}]`
`type`	列表的类型，单选(radio)/多选(checkbox)	String	`radio`
`chosenIds`	已选中id的项	Array	`--`
`hideChecked`	隐藏选择器	Boolean	`false`
`thumb`	缩略图	String	`--`
`extra`	次要信息	String	`--`
`operate`	列表中的操作按钮，根据传入的类型显示	Object,可选值[`text`,`icontype`,`img`]	icontype:`ellipsis`

Event

事件名称	说明	回调参数
`onEdit`	列表项次要操作响应方法	`item`当前项
`onSelect`	选中列表项响应方法	`selectedList` , `selectedIds`, 选中列表项数据及id数据（单选列表中数据只有一项）

Slot

属性	说明
`匿名插槽`	将内容插入列表项中即可
`作用域插槽`	内容需添加slot-scope属性，item为循环列表的当前项

1. SelectList 选择列表 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

SelectList 选择列表 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Slot

SelectList 选择列表 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用