标签：rop 通过 building label from 描述 form return highlight
问题描述：接口返回tree型数据，前端需要展示三个下拉框，每一子集选项由父级确定。
数据结构：build -> floor -> room。
通过监听build选中计算出响应的floorList，同理计算出roomList。
实现问题：build切换时，this.from.floorId = null 重置form.floorId,导致操作表单时，form.floorId赋值失败，使用this.$set()解决。
this.$set(this.form, "floorId", "");
html代码
<el-row>
<el-col :span="24">
<el-form-item label="楼栋：">
<ls-select
v-model="form.buildingId"
placeholder="请选择"
class="form-item"
>
<ls-select-menu slot="menu">
<ls-select-item
v-for="item in build"
:key="item.value"
v-bind="item"
></ls-select-item>
</ls-select-menu>
</ls-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="楼层：">
<ls-select
v-model="form.floorId"
placeholder="请选择"
class="form-item"
>
<ls-select-menu slot="menu">
<ls-select-item
v-for="item in floor"
:key="item.value"
v-bind="item"
></ls-select-item>
</ls-select-menu>
</ls-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="房间号：" prop="roomId">
<ls-select
v-model="form.roomId"
placeholder="请选择"
class="form-item"
>
<ls-select-menu slot="menu">
<ls-select-item
v-for="item in rooms"
:key="item.value"
v-bind="item"
></ls-select-item>
</ls-select-menu>
</ls-select>
</el-form-item>
</el-col>
</el-row>
js 代码：
computed: {
build() {
// 楼栋列表
const { cascade } = this;
const list = cascade.map((ele) => {
return {
value: ele.id,
label: ele.name,
};
});
return list;
},
floor() {
// 选中楼栋楼层列表
const { buildInfo } = this;
const list = buildInfo.map((ele) => {
return {
value: ele.id,
label: ele.name,
};
});
return list;
},
rooms() {
// 选中楼层房间列表
const { floorInfo } = this;
const list = floorInfo.map((ele) => {
return {
value: ele.id,
label: ele.name,
};
});
return list;
},
},
watch: {
"form.buildingId"(val) {
if (!val) {
return (this.buildInfo = []);
}
this.$set(this.form, "floorId", "");
this.buildInfo = this.cascade.filter((ele) => ele.id === val)[0].parents;
},
"form.floorId"(val) {
if (!val) {
return (this.floorInfo = []);
}
this.$set(this.form, "roomId", "");
this.floorInfo =
this.buildInfo.filter((ele) => ele.id === val)[0].parents || [];
},
}
标签：rop 通过 building label from 描述 form return highlight
原文地址：https://www.cnblogs.com/eightabs/p/14142497.html
