d2-curd-plus 如何在新建表单时为select 类型组件设置默认值
时间: 2023-12-04 18:01:37 浏览: 103
在 D2Admin 中使用 d2-curd-plus,可以通过在新建表单时为 select 类型组件设置默认值,来实现在新建表单中默认选中一个选项的功能。
以下是一个简单的示例:
```vue
<template>
<div>
<d2-form ref="form" :model="model" :rules="rules">
<el-form-item label="角色">
<d2-select v-model="model.roleId" :options="roles" :value-key="'id'" :label-key="'name'" :default-value="1"></d2-select>
</el-form-item>
</d2-form>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
model: {
roleId: '',
},
roles: [
{ id: 1, name: '管理员' },
{ id: 2, name: '普通用户' },
],
rules: {
roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
},
};
},
methods: {
submit() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交表单
}
});
},
},
};
</script>
```
在上面的示例中,我们在 `d2-select` 组件上添加了一个 `default-value` 属性,将其设置为 1。这意味着在新建表单时,角色下拉列表默认选中 `id` 为 1 的选项。你可以根据需要修改 `default-value` 属性的值。
请注意,如果在编辑表单中需要设置默认值,则应在表单模型中为相应字段设置默认值。例如,如果在编辑表单中需要默认选中 `id` 为 2 的选项,则可以在表单模型中将 `roleId` 字段的默认值设置为 2。
阅读全文