单选:
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变量代码:
// 指令分类id
cid: "",
// 指令分类列表
orderCidList: []
js方法代码:
/*** 获取指令分类列表*/
async getOrderCidList() {let params = {type: 32}let res = await getCategoryList(params)if (res.code == 200) {this.orderCidList = res.data; }
}
效果:
多选:
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变量代码:
// 指令分类id
cid: [],
// 指令分类列表
orderCidList: []
js方法代码:
/*** 获取指令分类列表*/
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;
}
效果: