单选:
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;
}
效果: