El-all-select NPM

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