<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-select
v-model="value"
v-loading="loading"
filterable
remote
:remote-method="remoteMethod"
multiple
placeholder="请输入">
<el-option
v-for="v in options"
:key="v.id"
:label="v.name"
:value="v.typeId"
:disabled="v.isShow"
>
</el-option>
</el-select>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
/*
* 1.基本显示:有三值
* 2.disabled:加在el-option禁用选项,默认为true(禁用);加在el-select禁用整个选择器
* 3.clearable: 清空选项，只用于单选
* 4.multiple: 用于多选，返回一个数组给，v-mode的变量设置为数组
* 5.远程搜索:filterable，remote，:remote-method，有模糊查询接口
*/
new Vue({
el: "#app",
components: {},
props: [],
data () {
return {
data: 345,
value: [],
loading: false,
data: [],
options: [
{
id: 1,
name: '王松',
typeId: 3463,
isShow: false
}, {
id: 2,
name: '李三',
typeId: 4255,
isShow: false
}, {
id: 3,
name: '刘燕',
typeId: 5632,
isShow: true
}, {
id: 4,
name: '林武',
typeId: 3525,
isShow: false
}
]
}
},
methods: {
output() {
this.value = []/*通过id初始化*/
},
remoteMethod(query) {
if (query != '') {
// this.data = this.options
// this.loading = true
}
}
},
mounted() {
this.output()
}
});
</script>
</body>
</html>