wang-select

基于vue2.x el-select 二次开发选择器

安装

npm i wang-select

入门

// 在vue文件main.js中映入自定义插件
import WangSelect from 'wang-select'
Vue.use(WangSelect)

Use in the page

<template>
  <wang-select v-model="value" :options="options" />
</template>

<script>
export default {
	name: "App",
	components: {
		WangSelect,
	},
	data() {
		return {
			value: "",
			options: [
				{ dictId: "选项1", dictName: "黄金糕" },
				{ dictId: "选项2", dictName: "双皮奶" },
				{ dictId: "选项3", dictName: "蚵仔煎" },
				{ dictId: "选项4", dictName: "龙须面" },
			],
		};
	},
};
</script>

API

| Props | Type | Default | Describe | | ------------- |:-------------:|:-----:|:--------------------------------------------------------| | disabled | Boolean | false | 是否禁用 | | selected | String | | 组件的值即 value / v-model | | options | Array | [] | 下拉列表 元素对象为{dictId:'',dictName:''} | | showAll | Boolean | true | 是否显示全选 | | showInverse | Boolean | true | 是否显示反选 | | disOptionsVal | Array | [] | 不想被选中的option的值，并且如果命中的话把命中的值回传 |

Data Item Option Properties

| Name | Type | Default | Describe | | ------------- |:-------------:| -----:|:----------------------------------------------| | dictId | String | | 选项的值 | | dictName | String | | 选项的标签 |