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

效果:

相关推荐
武昌库里写JAVA27 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
jjw_zyfx8 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷10 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱056712 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.12 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding12 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥12 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信12 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化