vue treeSelect 和 element ui 结合校验问题
默认element ui 不能校验 treeSelect
解决办法：
1.
2. ·
<el-form-item label="活动名称" prop="region">
<treeselect v-model="ruleForm.region" :options="options" @input="inputChange"/>
</el-form-item>
注意：prop="region"/v-model="ruleForm.region"/是必须的
methods: {
inputChange() {
this.$refs['ruleForm'].validateField('region')
},
}
rules: {
region: [
{
required: true, message: "请选择活动区域", trigger: "input" },
],
}
全部代码
<template>
<div id="HelloWorld">
<el-row>
<el-col :span="3">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini">
<el-form-item label="活动名称" prop="region">
<treeselect v-model="ruleForm.region" :options="options" @input="inputChange"/>
</el-form-item>
<hr>
<el-form-item style="margin-top: 50px">
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
// register the component
components: {
Treeselect },
methods: {
//inputChange
inputChange() {
this.$refs['ruleForm'].validateField('region')
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
data() {
return {
// define the default value
// define options
options: [
{
id: "a",
label: "a",
children: [
{
id: "aa",
label: "aa",
},
{
id: "ab",
label: "ab",
},
],
},
{
id: "b",
label: "b",
},
{
id: "c",
label: "c",
},
],
ruleForm: {
value: null
},
rules: {
name: [
{
required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
region: [
{
required: true, message: "请选择活动区域", trigger: "input" },
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change",
},
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{
required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [{
required: true, message: "请填写活动形式", trigger: "blur" }],
},
};
},
};
</script>
<style scoped>
.vue-treeselect {
height: 28px;
}
.vue-treeselect .vue-treeselect__control {
height: 28px !important;
}
.vue-treeselect__placeholder {
line-height: 28px;
font-size: 14px;
}
.vue-treeselect input {
font-size: 16px;
}
</style>