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;
}

效果:

相关推荐
老家的回忆1 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
pe7er2 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er2 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
蓝胖子的多啦A梦3 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想3 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景3 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户3802258598243 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
源码站~4 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐