avue中:单选框、复选框、下拉框多选
avue中实现单选框、复选框、下拉框、下拉框多选
·
单选框、复选框、下拉框、下拉多选框,都需要使用字典进行选择框中值的定义
1.单选框
{
label: "风险类型",
type: "radio", //单选框
dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
props: {
label: "dictValue",
value: "dictKey",
},
slot: true,
prop: "riskType",
rules: [
{
required: true,
message: "请输入风险类型",
trigger: "blur",
},
],
},
效果图:
2.复选框:
{
label: "风险类型",
type: "checkbox", //复选框
dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
props: {
label: "dictValue",
value: "dictKey",
},
slot: true,
prop: "riskType",
rules: [
{
required: true,
message: "请输入风险类型",
trigger: "blur",
},
],
},
效果图:
3.下拉框多选
{
label: "风险类型",
type: "select", //下拉框类型
multiple: true, //将可选变为多选
dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
props: {
label: "dictValue",
value: "dictKey",
},
slot: true,
prop: "riskType",
rules: [
{
required: true,
message: "请输入风险类型",
trigger: "blur",
},
],
},
效果图:
更多推荐
已为社区贡献3条内容
所有评论(0)