UI2.0 多选下拉框

功能介绍

基于 el-select 进行二次封装，保留了之前的基础功能，并额外新增了以下几大功能：

• 支持全选
• 支持单选某一项取消其他项的选择
• 支持确定取消功能
• 支持本地筛选
• 支持远程搜索
• 支持 shift 多选
• 支持 collapse-tags 折叠

引入说明

1. 安装组件 npm install @yinta/common-multiple-select
2. 代码位置：https://git.yintaerp.com/yinta-fed/yinta-fed-docs/-/tree/dev/components/common/MultipleSelect
3. 如果过程中有什么问题，可以在这个公共的 git 仓库中提交修改。

在 vue.config.js 中加入配置以便能进行 babel 编译

module.exports = {
  transpileDependencies: ['@yinta/common-multiple-select'],
};

// 引入
import MultipleSelect from '@yinta/common-multiple-select';
// 注册
export default {
  components: {
    MultipleSelect,
  },
};

使用例子

<template>
  <div style="padding: 16px">
    <el-card>
      <!--默认自带筛选功能，传入 remote 参数，则需监听 searchChange 事件，从接口拿 options 配置-->
      <common-multiple-select
        v-model="selectedIds"
        :options="selectOptions"
        collapse-tags
        @change="handleChange"
        @search-change="handleSearch"
      />
    </el-card>
  </div>
</template>

 <script>
import CommonMultipleSelect from './common-multiple-select'

export default {
  components: {
    CommonMultipleSelect
  },
  data() {
    return {
      selectedIds: ['选项1'],
      selectOptions: [
        {
          value: '选项1',
          label: '黄金糕1'
        },
        {
          value: '选项2',
          label: '双皮奶1'
        },
        {
          value: '选项3',
          label: '蚵仔煎1'
        }
      ]
    }
  },
  methods: {
    handleSearch(val) {
      console.log(val)
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

Select Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ---------------------------------- | ------- | ------ | ------ | | v-model | 绑定值 | Array | | 无 | | options | 下拉选项 | Array | | 无 | | collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | | false | | remote | 是否为远程搜索 | boolean | | false |

Select Events

| 事件名称 | 说明 | 类型 | | ------------- | ----------------------- | ------------ | | change | 选中值发生变化时触发 | 目前的选中值 | | search-change | remote 模式下，筛选回调 | 搜索关键词 |