1.【子组件】
<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>
</div>
</template>
<script>
export default {
name: "Combox",
data() {
return {
options: [],
svalue: ""
};
},
methods: {
_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地址
// urlName: {
// type: String
// }, //跨域请求标志
metName: {
type: String
}, //方法名
dtName: {
type: String
}, //条件参数
value: {
type: String
}, //接受外部v-model传入的值
fileType: {
type: Object
} //定义请求回来的json数据格式
},
mounted() {
//初始话下拉框的值
console.log(this);
this.svalue = this.value;
let parames = {
functionName: this.url,
methodName: this.metName,
data: {
// 查询条件
dictTypeCode: this.dtName
}
};
console.log(this);
this.http(JSON.stringify(parames))
.then(res => {
console.log(res);
alert(JSON.stringify(res.data.dictList));
this.options = this._dataTransform(res.data.dictList);
})
.catch(error => {
console.log(error);
});
}
};
</script>
<style scoped>
</style>
2.【父组件】
//引入组件
import sltopn from '@/components/select/sltopn.vue'
//注册组件
components: {sltopn }
//使用
<sltopn :url="'productbiz.service.commontable.PrdDictService'" :metName="'queryDict'" :dtName="'fundType'" :fileType="{'value':'dictValue','label':'dictName'}"></sltopn>