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		选项的标签