Cascader 级联选择、回显

一、选择时的效果：

页面代码

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

后台controller方法，查询一二级列表

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

二、数据回显:Cascader回显较为复杂，且我的一级列表是List<String>形式，没有id，为方便展示用两个select控件

页面代码

<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：打开修改弹窗回显数据

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

点击一级列表，选择发生改变的事件。这里网络请求很多重复代码，后期会抽取，但是整体效果和实现方法却易于理解

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