# MutliSelector 下拉搜索多选

版本：1.14.0

开发：郑杰7

交互：苗任越

UI：江佳欢

规范：[已评审] http://10.33.43.73/BBG_UED/BUI_Design/bscs/v2.0/issues/46

# 安装

$ npm i @hui-pro/mutli-selector -D
# 或者
$ yarn add @hui-pro/mutli-selector --dev

# 引入

import MutliSelector from '@hui-pro/mutli-selector';
import '@hui-pro/mutli-selector/theme/index.scss';
Vue.use(MutliSelector);

# 基础用法

<h-multi-selector v-model="value" :dataList="list1" />

<script>
  export default {
    data() {
      return {
        list1: [],
        value: []
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let list = [];
        for (let i = 0; i < 20; i++) {
          list.push({
            id: i,
            name: `name${i}`
          });
        }
        this.list1 = list;
      }
    },
    watch: {
      value(val) {
        console.log('wz', val);
      }
    }
  };
</script>

# 排序

<h-multi-selector v-model="value3" :dataList="list1" :sort="true" />

<script>
  export default {
    data() {
      return {
        list1: [],
        value3: []
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let list = [];
        for (let i = 0; i < 20; i++) {
          list.push({
            id: i,
            name: `name${i}`
          });
        }
        this.list1 = list;
      }
    },
    watch: {
      value3(val) {
        console.log('wz', val);
      }
    }
  };
</script>

# 选中个数限制

<h-multi-selector v-model="value6" :dataList="list1" :multi-num="5" />

<script>
  export default {
    data() {
      return {
        list1: [],
        value6: []
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let list = [];
        for (let i = 0; i < 20; i++) {
          list.push({
            id: i,
            name: `name${i}`
          });
        }
        this.list1 = list;
      }
    },
    watch: {
      value6(val) {
        console.log('wz', val);
      }
    }
  };
</script>

# 含全部(联动)

<h-multi-selector v-model="value2" :dataList="list1" :hasAllSelect="true" />

<script>
  export default {
    data() {
      return {
        list1: [],
        value: [1]
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let list = [];
        for (let i = 0; i < 20; i++) {
          list.push({
            id: i,
            name: `name${i}`
          });
        }
        this.list1 = list;
      }
    },
    watch: {
      value(val) {
        console.log('wz', val);
      }
    }
  };
</script>

# 含全部(不联动)

<h-multi-selector
  v-model="value4"
  :dataList="list2"
  :sort="true"
  :unsortId="unsortId"
/>

<script>
  export default {
    data() {
      return {
        list2: [],
        value4: []
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let list = [];
        for (let i = 0; i < 20; i++) {
          list.push({
            id: i,
            name: `name${i}`
          });
        }
        this.unsortId = ['all'];
        this.list2 = [{ id: 'all', name: '全部' }].concat(list);
      }
    },
    watch: {
      value4(val) {
        console.log('wz', val);
      }
    }
  };
</script>

# API

# Attributes

参数	说明	类型	可选值	默认值
data-list	下拉选项列表	Array	-	[]
options	传入的 name 和 id	Object	-	{id:'id', name: 'name'}
unsortId	不需要排序的 id 值（配合 sort 使用）	Array	-	[]
sort	收齐下拉面板时是否需要将选中项置顶	Boolean	-	false
sort	收齐下拉面板时是否需要将选中项置顶	Boolean	-	false
multi-num	选中项限制个数 (不要和联动全部配合使用，目前不支持全部联动加限制个数)	number	-	-
has-all-select	是否需要联动全部选项	Boolean	-	false

← CascadeSelector 横向级联选择器 AddFormItem 逐条添加 →