vue treeSelect 和 element ui 结合校验问题

默认element ui 不能校验 treeSelect

解决办法：
1.
2. ·

<el-form-item label="活动名称" prop="region">
  <treeselect v-model="ruleForm.region"  :options="options"  
  @input="inputChange"
  @select="handlerSelect"/>
</el-form-item>

注意：prop="region"/v-model="ruleForm.region"/是必须的

methods: {
	//输入时校验
	inputChange() {
      this.$refs['ruleForm'].validateField('region')
    },
    //选中时校验
    handlerSelect(node, instanceId) {
      console.log(this.menuOptions.form, this.$refs['form'])
      this.$nextTick(() => {
        this.$refs['form'].validateField('pId')
      })
    },
}

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>