代码展示
时间: 2023-07-09 07:19:51 浏览: 55
以下是一个基于Vue.js + Element UI实现的treeselect表单验证示例代码:
```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="Treeselect" prop="treeselect">
<el-tree-select v-model="form.treeselect" :data="treeData"></el-tree-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
treeselect: null
},
treeData: [
{
label: 'Option 1',
value: 'option1'
},
{
label: 'Option 2',
value: 'option2'
},
{
label: 'Option 3',
value: 'option3'
}
],
rules: {
treeselect: [
{ required: true, message: 'Please select an option', trigger: 'change' },
{ validator: this.validateTreeselect, trigger: 'change' }
]
}
}
},
methods: {
validateTreeselect(rule, value, callback) {
if (value.length > 1) {
callback(new Error('Please select only one option'))
} else {
callback()
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,可以提交表单
} else {
// 表单验证失败,给出相应的提示信息
}
})
}
}
}
</script>
```
在上述示例代码中,我们通过设置rules属性来实现treeselect表单的验证,并定义了validateTreeselect方法来对treeselect表单的选项进行验证。同时,在submitForm方法中,我们通过调用this.$refs.form.validate方法来对整个表单进行验证。如果表单验证通过,我们可以提交表单;如果表单验证失败,我们可以给出相应的提示信息。