el-all-select

A all select component for Vue.js.

description

The component is based on element-ui.it has functions, such as: filter,select all etc.

Live demo

https://shadowmon.github.io/el-all-select

Installation

yarn add el-all-select or
npm i el-all-select

Complete example

<template>
  <el-all-select
    v-model="value" 
    select-all 
    select-label="全选列表" 
    multiple 
    collapse-tags 
    clearable 
    :options="options"
    placeholder="请选择列表"
    @change="onChange"
    @handleLink="onLink">
  </el-all-select>
</template>

<script>
import ElAllSelect from 'el-all-select';

export default {
  components: {
    ElAllSelect
  },
  data() {
    return {
      options: [
        { label: '全部日程', value: 1 },
        { label: '个人日程', value: 2, name: '设置' },
        { label: '代办日程', value: 3 },
        { label: '订阅日程', value: 4, name: '设置' },
        { label: '部门日程', value: 5 },
        { label: '公文日程', value: 6, name: '设置' },
        { label: '会议日程', value: 7 }
      ],
      value: []     //选中的值
    };
  },
  methods: {
      onChange (val) {
        console.log(val)
      },
      onLink (val) {
        console.log(val)
      }  
  }  
};
</script>

继承了 el-select 所有的 Props/Methods/Events/Slots，这里不再重复，请至官方文档查看。

Select Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------------|----------------------------------------------------------|-------------------|-------------|--------| | value / v-model | 绑定值 | string, string[] | — | — | | color | 是否开启选择框颜色列表 | boolean | true, false | true | | select-all | 是否开启全选 | boolean | true, false | true | | select-label | 全选的标签，若不设置则默认为 全选 | string | — | 全选 | | placeholder | 输入框占位文本 | string | — | | | multiple | 是否多选 | boolean | true, false | false |

Select Events

| 事件名称 | 说明 | 回调参数 | |--------------------|----------------------------------------------------------|-------------------| | change| 选中值发生变化时触发 | 目前的选中值 | | handleLink | 根据option中的name显示，点击name文本时触发 | 目前的选中值 |

Select Slots

| name | 说明 | |--------------------|----------------------------------------------------------| | tpl | Option 组件列表内容 |

示例

相关文档

el-select

License

MIT