封装vue element-ui下拉框组件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
原文:https://www.jianshu.com/p/aaf0acba97a0
公用组件sltopn.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: 'sltopn',
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地址
urlName:{
type:String
},//跨域请求标志
metName:{
type:String
},//方法名
dtName:{
type:String
},//条件参数
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);
})*/
let parames = {
"moduleName": eval(this.urlName),
"functionName": this.url,
"methodName": this.metName,
"data": { // 查询条件
dictTypeCode: this.dtName
}
};
this.http(JSON.stringify(parames))
.then((res)=>{
alert(JSON.stringify(res.data.dictList))
this.options=this._dataTransform(res.data.dictList);
}).catch(error => {
console.log(error);
})
}
}
</script>
页面使用
引入组件
import sltopn from '@/components/select/sltopn.vue'
注册组件
components: {sltopn }
//使用
<sltopn :url="'productbiz.service.commontable.PrdDictService'" :metName="'queryDict'" :dtName="'fundType'" :urlName="'this.P'" v-model="isShow" :fileType="{'value':'dictValue','label':'dictName'}"></sltopn>
效果
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)