基於vue的Element-ui定義本身的select組件vue
<template> <div> <el-select v-model="svalue" placeholder="請選擇" filterable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- <el-button @click="clickme()">默認按鈕</el-button> --> <!-- <input type="text" :value="value"> --> </div> </template> <script> export default { name: 'XdhSelect', data() { return { options:[], svalue: '' } }, methods: { // clickme(){ // alert(this.svalue); // }, //轉換下拉框下的字段 _dataTransform(data){ let _data = []; for (let i = 0; i < data.length; i++) { _data[i] = {}; _data[i].label = data[i][this.fileType.label]; _data[i].value = data[i][this.fileType.value]; } return _data; } }, watch:{ //判斷下拉框的值是否有改變 svalue(val, oldVal) { // console.log('new: %s, old: %s', val, oldVal) if(val!=oldVal){ this.$emit('input', this.svalue); } }, }, props: { url:{ type:String },//導入的url地址 value: { type: String },//接受外部v-model傳入的值 fileType:{ type:Object }//定義請求回來的json數據格式 }, mounted(){ //初始話下拉框的值 this.svalue=this.value; //遠程請求回來的數據 this.$fetch(this.url) .then((response) => { this.options=this._dataTransform(response); }) } } </script>
組件用法json
<xdh-select :url="'/api/option'" v-model="isShow" :fileType="{'value':'dasm','label':'dasmb'}"></xdh-select>
url爲請求鏈接,fileType爲返回的數據格式api