Selección de cascada en cascada y eco

1. El efecto de la selección:

Código de página

<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>

datos

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);
    }
},

método

// 当选中数据发生变化时，event为返回选中节点的值
handleAChange(event) {
    // event 为选中节点的值，event[0]为第一级选中值，event[1]为第二级选中值。也就是data加载中的value值。
    console.log(event)
},

Método de controlador de back-end, consulta las listas de primer y segundo nivel

@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. Eco de datos: el eco en cascada es más complicado, y mi lista de primer nivel tiene la forma de List <String> sin identificación, por lo que utilizo dos controles de selección para la conveniencia de la visualización

Código de página

<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>

datos

diviceA: [],
equip: '',
portA: [],
portOptionA: '',

método: abre y modifica la ventana emergente para mostrar datos

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;
},   

Haga clic en la lista de primer nivel para seleccionar el evento que ha cambiado. Aquí, la red solicita una gran cantidad de código repetitivo, que se extraerá más adelante, pero el efecto general y el método de implementación son fáciles de entender.

/*加载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);
        });
    }
},