【el-form+vue-treeselect】vue表单验证树形结构+填写时返回unknown

npm install --save @riophae/vue-treeselect

2、页面使用

<template>
  <div>
    <treeselect v-model="value" :options="options" placeholder="请选择"/>
  </div>
</template>


import TreeselectView from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
}

实际运用套入表单后：

但是普通表单验证的写法对于vue-treeselect不起作用：

 <el-form ref="form" :model="form" :rules="rules" label-width="140px">
    <el-form-item label="风险分区名称" prop="areaId">
      <el-select v-model="form.areaId" placeholder="请选择风险分区" clearable>
        <el-option v-for="dict in riskPartitionNameOptions"
          :key="dict.id"
          :label="dict.label"
          :value="dict.id"
        />
      </el-select>
    </el-form-item>
    //要想让vue-treeselect也带验证 先同上一样在prop写好名字
    //再加上@input(后面解释
    <el-form-item label="负责人部门" prop="riskPersonDept">
      <TreeselectView
        v-model="form.riskPersonDept"
        :options="deptOptions"
        :show-count="true"
        placeholder="请选择归属部门"
        @input="riskPersonDeptChangeValue"
      />
    </el-form-item>
</el-form>

2、在rules里的验证
注意用 trigger: "input"
不用@input@close 这样写没有用~~

 rules: {
        areaId: [
          { required: true, message: "请选择分区名称", trigger: "change"},
        ],
        riskPersonDept: [
          { required: true, message: "请选择负责人部门", trigger: "input"},
      },

3、methods加上自定义的@input中的函数
表单中的：@input="riskPersonDeptChangeValue"

methods: {
    riskPersonDeptChangeValue() {
    //form是表单名 riskPersonDept是prop名
      this.$refs["form"].validateField("riskPersonDept");
    }
}

组件自带是@select
不行的同志们44把@input替换成@select

另外重新打开表单时选择区是unknown：

解决：
1、默认是null
2、v-model 改写成 :model