1 html
<!-- 弹框 -->
<el-dialog
@close="resetForm()"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="title2"
:destroy-on-close="true"
:visible.sync="dialogFormVisible2"
width="30%"
>
<el-form :rules="rules" :model="form2" ref="ruleForm1">
<el-form-item label="隶属分类" prop="puuid" label-width="100px">
<el-cascader
v-model="form2.puuid"
:options="newData"
style="width: 100%"
:placeholder="form2.zi == '' ? '请选择' : form2.zi"
clearable
:props="{
checkStrictly: true,
value: 'uuid',
label: 'name',
emitPath: false,
}"
>
</el-cascader>
</el-form-item>
<el-form-item label="分类名称" label-width="100px" prop="name">
<el-input
@input="form2.name = String(form2.name)"
v-model="form2.name"
clearable
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
@click="
resetForm();
dialogFormVisible2 = false;
"
>取 消</el-button
>
<el-button type="primary" @click="addForm2()">保存</el-button>
</div>
</el-dialog>
2 :options="newData" 在 data中定义 newData: [],
3 逻辑 例如 在请求中
useTimeList() {
let url = "/p/articleCate/all";
this.$axios
.post(url, this.$qs({ type: 1, flag: 1, uuid: this.form2.uuid }))
.then((response) => {
if (response.data.code == 0) {
this.timeOptions = response.data.data;
this.parentData = response.data.data;
this.parentData.unshift({
name: "顶级分类",
uuid: 0,
key: 0,
puuid: 0,
level: 1,
});
// console.log(this.parentData);
/* 让无限极联动器 到第3级 */
let arr = JSON.parse(JSON.stringify(response.data.data))
console.log(arr);
arr.forEach((item, idx) => {
console.log(item);
if(item.children && item.children.length) {
item.children.forEach((itm, ix) => {
if(itm.children && itm.children.length) {
delete itm.children
}
})
}
this.newData.push(item)
})
} else {
this.$message({
message: response.data.message,
type: "error",
});
}
})
.catch((error) => {});
},
4 使用循环进行筛选子类
/* 让无限极联动器 到第3级 */
let arr = JSON.parse(JSON.stringify(response.data.data))
console.log(arr);
arr.forEach((item, idx) => {
console.log(item);
if(item.children && item.children.length) {
item.children.forEach((itm, ix) => {
if(itm.children && itm.children.length) {
delete itm.children
}
})
}
this.newData.push(item)
})