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

效果:

相关推荐
晨枫阳11 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技13 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte13 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin13 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击14 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder14 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202615 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737415 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
SEO-狼术16 小时前
DevExtreme Complete Crack,responsive UI widgets
ui
浩星16 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app