element ui的下拉选择单选和多选

单选:

html代码:

html 复制代码
<el-form-item label="指令分类: ">
    <el-select v-model="cid" style="width:100%;" 
        placeholder="请选择指令分类" clearable>
        <el-option v-for="item in orderCidList" :key="item.id" :label="item.title"
            :value="item.id">
        </el-option>
    </el-select>
</el-form-item>

js变量代码:

javascript 复制代码
// 指令分类id
cid: "",
// 指令分类列表
orderCidList: []

js方法代码:

javascript 复制代码
/**
 * 获取指令分类列表
 */
async getOrderCidList() {
    let params = {
        type: 32
    }
    let res = await getCategoryList(params)
    if (res.code == 200) {
        this.orderCidList = res.data;    
    }
}

效果:

多选:

html代码:

html 复制代码
<el-form-item label="指令分类: ">
    <el-cascader style="width:100%;" v-model="searchInfo.cid" 
        :options="orderCidList" :props="{ multiple: true, emitPath: false}" 
        clearable placeholder="请选择指令分类">
    </el-cascader>
</el-form-item>

js变量代码:

javascript 复制代码
// 指令分类id
cid: [],
// 指令分类列表
orderCidList: []

js方法代码:

javascript 复制代码
/**
 * 获取指令分类列表
 */
async getOrderCidList() {
    let params = {
        type: 32
    }
    let res = await getCategoryList(params)
    if (res.code == 200) {
        this.orderCidList = this.handleCategory(res.data);    
    }
},
/**
 * 处理多选分类
 */
handleCategory(data) {
    let res = [];
    if (data.length > 0) {
        data.map((item) => {
            let obj = {
                value: item.id,
                label: item.title,
            };
            if (item.children && item.children.length > 0 ) {
                obj.children = this.handleCategory(item.children)
            };
            res.push(obj);
        });
    };
    return res;
}

效果:

相关推荐
子兮曰26 分钟前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
kk不中嘞3 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
影子信息3 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕4 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
江拥羡橙4 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
小菜全4 小时前
打包 Uniapp
javascript·vue.js·html5
xrkhy5 小时前
ElementUI之Upload 上传的使用
前端·elementui
小菜全7 小时前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
小高0077 小时前
🔥🔥🔥Vue部署踩坑全记录:publicPath和base到底啥区别?99%的前端都搞错过!
前端·vue.js·面试