elementUI-select基础属性
<!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>