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

效果:

相关推荐
花花鱼32 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
不秃头的UI设计师2 小时前
UI界面设计入门:打造卓越用户体验
ui·ux·ui设计
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
未来的嗒嘀嗒3 小时前
Axure是什么软件?全方位解读助力设计入门
ui·photoshop
neter.asia3 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
十一吖i3 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年3 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
wrx繁星点点4 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
熊的猫4 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js