1. The effect of selection:
Page code
<el-tag type="success">选择A面信息</el-tag> <div style="margin-top: 10px"> <el-cascader style="width: 70%" :show-all-levels="false" placeholder="点击选择A面位置" @change="handleAChange" :props="propA" clearable> </el-cascader> </div>
data
propA: { lazy: true, lazyLoad(node, resolve) { setTimeout(() => { if (node.level === 0) { // 如果当前节点是第一级,查询一级列表 axios.get('/modf/getequips').then(res => { const equips = res.map((value, i) => ({ value: value, label: value, leaf: node.level >= 1 })); resolve(equips); }).catch(err => { console.log(err); }); // 如果是二级,查询二级列表 } else if (node.level === 1) { axios.get('/modf/getports', {params: {equip: node.value}}).then(res => { const all = res.map((value, i) => ({ value: value.id, // 自定义标签显示的格式 label: "设备:" + value.devicePort + ";ODF位置:" + value.odfNum + ":" + value.terminal, // leaf标志是否叶子节点。true是叶子节点,无子节点,false不是叶子节点,有子节点。 leaf: node.level >= 1 })); // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(all); }).catch(err => { console.log(err); }); } }, 1000); } },
method
// 当选中数据发生变化时,event为返回选中节点的值 handleAChange(event) { // event 为选中节点的值,event[0]为第一级选中值,event[1]为第二级选中值。也就是data加载中的value值。 console.log(event) },
Back-end controller method, query the first-level and second-level lists
@GetMapping("/getequips") public List getequips() { List<String> equipments = modfService.getequips(); List res = new ArrayList(); return res; }
@GetMapping("/getports") public List getports(String equip) { System.out.println(equip); List<ModfA> res = modfService.getports(equip); return res; }
2. Data echo: Cascader echo is more complicated, and my first-level list is in the form of List<String> without id, so I use two select controls for the convenience of display
Page code
<el-tag type="success">A面信息</el-tag> <div style="margin-top: 10px"> <el-select @change="diviceAchange" v-model="equip" clearable placeholder="选择设备"> <el-option v-for="item in diviceA" :key="item" :label="item" :value="item"> </el-option> </el-select> <el-select style="margin-left: 5px;width: 420px" v-model="portOptionA" clearable @change="portAchange" placeholder="选择位置"> <el-option v-for="item in portA" :key="item.id" :label="'设备:'+item.devicePort+';'+item.odfNum + ':' + item.terminal" :value="item.id"> </el-option> </el-select>
data
diviceA: [], equip: '', portA: [], portOptionA: '',
method: open and modify the pop-up window to display data
showChange(row) { this.editDialog = true; /*加载A面设备一级列表*/ this.getRequest("/modf/getequips").then(result => { if (result) { this.diviceA = result; } }) /*数据回显*/ this.equip = row.aEquipment; // 准备二级列表 axios.get('/modf/getports', {params: {equip: this.equip}}).then(res => { if (res) { this.portA = res; } }).catch(err => { console.log(err); }); // 回显二级数据 this.portOptionA = "设备:" + row.aDevicePort + ";" + row.aOdfNum + ":" + row.bPositinPort; },
Click the first-level list to select the event that has changed. Here the network requests a lot of repetitive code, which will be extracted later, but the overall effect and implementation method are easy to understand
/*加载A面设备二级列表*/ diviceAchange(change) { this.equip = change; this.portOptionA = ""; if (change) { axios.get('/modf/getports', {params: {equip: this.equip}}).then(res => { if (res) { this.portA = res; } }).catch(err => { console.log(err); }); } },