定义一个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中
通过参数调用以及转换就可以实现获取级联数据并在页面上显示