Cascader 级联选择器代码实现

当一个数据集合有清晰的层级结构时，可通过级联选择器Cascader 逐级查看并选择，在开发过程中，非常常见，解决选择列表数量过多的情况。

结果

1、组件

<el-cascader :props="props" :options="unitData" v-model="query.UnitName" size="small" style="margin-left: 10px; margin-right: 10px;width: 350px;"></el-cascader>

• 使用 el-cascader 组件（Element UI 库中的级联选择器），用于选择单位。
• :options="unitData" 绑定单位数据，v-model="query.UnitName" 绑定选择的值。

2、查询和重置按钮

<el-button class="search-btn" type="primary" size="small" @click="searchData()">查询</el-button>
<el-button class="search-btn" type="primary" size="small" @click="clearSearchData()">重置</el-button>

• 两个按钮，分别用于查询和重置操作。点击按钮会用 searchData() 和 clearSearchData() 方法。

3、 加载数据的 load 方法

load(){
    const userid = localStorage.getItem('userid'); 
    var token = localStorage.getItem('token');
    const headers = {
        'Authorization': `Bearer ${token}`
    };
    this.$http.post('/api/Unit/GetNestedUnit', {userID: userid}, {headers: headers})
    .then((result) => {
        const data = result.data;
        if (data.code === 0) {
            const nodes = this.transformData(data.data);
            this.unitData = nodes;
        } else { 
            // 处理其他状态码的逻辑
        }
    })
    .catch((error) => {
        console.error('API 请求失败:', error);
    });
},

• 通过 POST 请求向 API 获取单位的嵌套数据，成功后调用 transformData 方法处理数据，并将结果存储在 unitData 中。

4、数据转换的 transformData 方法

transformData(units) {
    return units.map(unit => {
        return {
            value: unit.unitID,
            label: unit.unitName,
            children: Array.isArray(unit.children) && unit.children.length > 0 
            ? this.transformData(unit.children) 
            : []
        };      
    }).filter(node => 
        node !== null
    );   
},

• 该方法用于将原始单位数据转换为适合级联选择器的格式。
• 使用 map 方法遍历单位列表，生成具有 value, label, 和 children 属性的新对象。
• 如果单位有子单位，则递归调用 transformData 进行处理。

 总结

        如果数据量不大的情况下，减少使用懒加载。