ANT框架下的级联写法以及添加子集
首先了解级联的创建表,比如一个商品类型表
1.创建个商品类型表,属性如下
/// <summary>
/// 商品类型表
/// </summary>
[Table("GoodsType")]
public class GoodsType: Audit
{
/// <summary>
/// 商品类型id
/// </summary>
[Key]
[SugarColumn(IsPrimaryKey = true, IsIdentity = true)] //id自增
public int GoodsTypeId { get; set; }
/// <summary>
/// 商品类型名称
/// </summary>
[SugarColumn(IsNullable = false)]//属性不能为空 true为空
public string? GoodsTypeName { get; set; }
/// <summary>
///父级Id
/// </summary>
[SugarColumn(IsNullable = false)]//属性不能为空 true为空
public int ParentId { get; set; }
}
随后创建一个后台与前天进行传值的中间表(此表不需要迁移)
public class MenuItem
{
public int Value { get; set; }
public string? Label { get; set; }
public List<MenuItem>? Children { get; set; }
}
创建完成后,给商品类型表添加数据如下(注意ParentId的值的子集一定要与父级goodsTypeId一致)

随后进行后台编写
public async Task<List<MenuItem>> GetMenuItems(int gid)
{
var list = await sqlSugar.Queryable<GoodsType>().Where(x=>x.ParentId==gid).Select(x => new MenuItem
{
Value = x.GoodsTypeId,
Label = x.GoodsTypeName,
}).ToListAsync();
foreach ( var item in list)
{
item.Children = await GetMenuItems(item.Value);
}
return list;
}
后台进行写完进行前台编写
显示区域这样写
<a-form-model-item label="父级id" prop="goodsType">
<a-cascader
v-model="form.pIdArr"
:options="options"
placeholder="Please select"
@change="handleChange"
:props="{ checkStrictly: true }"
/>
data中这样写
form: {
pId: 0,
goodsTypeName: "",
pIdArr: [],
parentId: "",
haschildern: false,
},
options: [],
方法如下
loadShowTree() {
this.axios
.get("http://localhost:5214/api/Goods/GetMenuItems")
.then((res) => {
this.options = res.data;
console.log(this.options);
});
},
handleChange(value) {
alert(value);
this.form.pId = this.data.value;
this.form.goodsTypeName = this.data.label;
this.form.haschildern = this.data.children && this.data.children > 0;
},
到此编写完毕

浙公网安备 33010602011771号