```html
<div class="selector-parent demo-block" id="selector-list-demo1">
  <lx-group title="list selector">
    <lx-cell
      title="选择单个"
      @click.native="visible = true"
    >
      <div solt="value">
        {{ showName }}
      </div>
    </lx-cell>
    <lx-cell
      title="选择多个"
      @click.native="visible2 = true"
    >
      <div solt="value">
        {{ showName2 }}
      </div>
    </lx-cell>
  </lx-group>

  <!-- 单选 -->
  <lx-selectorList
    v-model="visible"
    title="选择单人"
    role-key="role"
    id-key="roleId"
    name-key="roleName"
    :role-list="roleList"
    :checked.sync="checked"
    :name.sync="showName"
  />

  <!-- 多选 -->
  <lx-selectorList
    v-model="visible2"
    title="选择多人"
    role-key="role"
    id-key="roleId"
    name-key="roleName"
    :role-list="roleList"
    :checked.sync="checked2"
    :name.sync="showName2"
    :count="4"
    @commit="commit"
  />
</div>


<script>
// Selectorlist.md
new Vue({
  el: '#selector-list-demo1',
  
  data: {
    visible: false,
    visible2: false,
    checked: '',
    checked2: [],
    showName: '',
    showName2: ''
  },
  created () {
    this.roleList = [
      { roleId: '1', roleName: 'ABC', role: '产品经理、行政经理' },
      { roleId: 2, roleName: 'B', role: '行政经理2' },
      { roleId: 3, roleName: 'C', role: '行政经理3' },
      { roleId: 4, roleName: 'D', role: '行政经理3' },
      { roleId: 5, roleName: 'E', role: '行政经理3' },
      { roleId: 6, roleName: 'F', role: '产品经理、行政经理、网红直播博主' },
      { roleId: 7, roleName: 'G', role: '行政经理2' },
      { roleId: 8, roleName: 'H', role: '行政经理3' },
      { roleId: 9, roleName: 'I', role: '行政经理3' },
      { roleId: 10, roleName: 'J', role: '行政经理3' }
    ]
  },
  methods: {
    commit (checked, name) {
      console.log(checked, name)
    }
  }
})
</script>
```