526互联

vue select-option组件 普通下拉和远程下拉数据展示及回显

发布时间 2023-11-03 19:28:43作者: 伟笑
前言：后台返回的数据格式有如下两种类型：
1、json格式：
codeTypeMap:{
    "000":"身份证",
    "001":"户口本"
}

2、数组格式：
codeTypeMapList: [
    {code:"000",name:"身份证"},
    {code:"000",name:"户口本"}
]
 
一、普通下拉
1、json格式：
<el-select v-model="form.prpLpayeeInfo.id">
    <el-option
        v-for="key in Object.keys(codeTypeMap)"
        :key="key"
        :label="codeTypeMap[key]"
        :value="key"
    />
</el-select>

2、数组格式：
<el-select v-model="form.prpLpayeeInfo.id">
    <el-option
        v-for="item in codeTypeMapList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
    />
</el-select>
二、远程下拉
1、json格式：
<el-select
    v-model="form.prpLscheduleTask.scheduledComCode"
    filterable
    clearable
    remote
    reserve-keyword
    :remote-method="loadScheduledComCode"
    :loading="selectIsloading"
    placeholder="组号或组名"
>
    <el-option v-for="key in Object.keys(codeTypeMap)" :key="key" :label="codeTypeMap[key]" :value="key">
        {{ key }}-{{ codeTypeMap[key] }}
    </el-option>
</el-select>

loadScheduledComCode(val) {
    if (val == "*") {
        this.comCodeArr = codeTypeMap;
        return true;
    }
    this.selectIsloading = true;
    let data = {};
    Object.keys(codeTypeMap).forEach((item) => {
        if (item.indexOf(val) != -1 || codeTypeMap[item].indexOf(val) != -1) {
            data[item] = codeTypeMap[item];
        }
    });
    this.comCodeArr = data;
    this.selectIsloading = false;
},
2、数组格式：
<el-select
    v-model="form.prpLscheduleTask.scheduledComCode"
    filterable
    clearable
    remote
    reserve-keyword
    :remote-method="loadScheduledComCode"
    :loading="selectIsloading"
    placeholder="组号或组名"
>
    <el-option v-for="item in newList" :key="item.code" :label="item.name" :value="item.code">
        {{ item.code + "-" + item.name }}
    </el-option>
</el-select>
// 组下拉数据
async loadScheduledComCode(query) {
    if (query !== "") {
        this.selectIsloading = true;
        try {
            const { data } = await api.getDcode({
                dwrParam: {
                    cond: {
                        codeType: "GroupTree",
                        type: "inputLoad",
                        extraCond: this.groupTreeExtraCond,
                        language: "C",
                        query: query,
                        riskCode: "PUB"
                    },
                    // 当前登陆人
                    userCodeSession: this.$store.getters.userInfo.userCode,
                    // 当前登陆人所属机构
                    ComCodeSession: this.$store.getters.userInfo.comCode
                }
            });
            // 加工一下后台数据
            const newList = [];
            codeTypeMapList.map((item) => {
                return newList.push({
                    code: item.code,
                    name: item.name
                });
            });
        } catch (err) {
            this.$message.warning(err);
        }
        this.selectIsloading = false;
    }
}