<!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>
