vue3级联的使用方法

定义一个dto来去接受页面上的值

public class BoundlessDto
    {
        public int Value { get; set; }
        public string Label { get; set; }
        public List<BoundlessDto> Children { get; set; }
    }

定义好要去传输的值之后，开始书写方法（定义了一个私有方法去让其调用）

public async Task<ResultDto<List<BoundlessDto>>> GetMap(int gid = 0)
{
    // 调用 GetCascade 方法获取一级菜单数据
    var str = await GetCascade(gid);
    // 返回一级菜单数据
    return new ResultDto<List<BoundlessDto>> { Code = Result.Success, Data = str };
}

private async Task<List<BoundlessDto>> GetCascade(int gid)
{
    // 调用 Boundless.GetListAsync 方法获取地图数据
    var list = await Boundless.GetListAsync(x => x.PID == gid);
    // 创建一个新的 List<BoundlessDto> 对象，用于存储菜单数据
    var menuitem = new List<BoundlessDto>();
    // 遍历地图数据，并将每个地图数据转换为 BoundlessDto 对象
    foreach (var gt in list)
    {
        var item = new BoundlessDto
        {
            // 地图名称设置为地图名称
            Label = gt.BoundlessName,
            // 地图 ID 设置为地图 ID
            Value = gt.Id,
        };
        // 递归获取地图的子菜单
        item.Children = await GetCascade(gt.Id);
        // 添加地图到菜单中
        menuitem.Add(item);
    }
    // 返回菜单数据
    return menuitem;
}

以上后台方法就编写完成，去查看前台的代码编写

是控件的使用（单纯去显示的话可以设置成label（文字），如要有其他操作，设置成value，以此更好的去获取值）

<el-cascader
            :options="Cascadelist"
            clearable
            v-model="ruleForm.boundlessIdlist"
            :props="{ value: 'label' }"
            placeholder="请选择开户省市"
          />

要是去定义值进而进行添加需要一个后台的值，以及一个集合

//定义的值
boundlessId: "",
boundlessIdlist: [],

//在添加之前对值进行一个转化
ruleForm.boundlessId = ruleForm.boundlessIdlist.toString();

在上面控件使用prop传值的时候说明了，如有其余操作进而进行传值values，比如查看详情中级联显示方法，则需要对传入数据库的值进行一个转换

let a = res.data.data.boundlessId.split(",") // 将字符串类型的 boundlessId字段的值转换为字符串数组
let b = a.map(m => Number(m)) // 将字符串数组转换为数字数组
form.boundlessIdlist= b // 将数字数组保存在 form.boundlessIdlist中

通过参数调用以及转换就可以实现获取级联数据并在页面上显示