el-tree-select选择后校验提示显示

`el-tree-select` 是 Element UI 提供的一个基于树形结构的选择组件，它允许用户从树状列表中选择一项或多项。当用户完成选择并提交数据时，如果存在验证规则，可以设置校验提示以实时反馈是否满足条件。

在 Vue 中，你可以通过 `v-model` 绑定选中的值，并在表单的 `rules` 属性中定义校验规则。比如，如果你希望选择项的数量不能超过某个值，可以这样做：

<template>
  <el-form :model="form" :rules="{ selectedCountRule: { required: true, message: '请选择不超过{count}条', trigger: 'blur' } }">
    <el-tree
      ref="tree"
      v-model="form.selectedValues"
      :props="treeProps"
      @select="handleSelect"
    ></el-tree>
    <p v-if="form.errors.selectedCountRule">{{ form.errors.selectedCountRule }}</p> <!-- 显示错误信息 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        selectedValues: [],
      },
      treeProps: {
        children: 'children',
        value: 'id',
      },
    };
  },
  methods: {
    handleSelect(node) {
      // 这里可以根据选择添加或删除节点，同时更新 form.selectedValues 和 form.errors
    },
    validateSelectedCount(count) {
      // 检查 form.selectedValues 的长度是否超过 count
      if (this.form.selectedValues.length > count) {
        this.$refs.tree.validateField('selectedCountRule'); // 校验字段
      }
    },
  },
};
</script>

在这个例子中，当你选择新的选项时，`validateSelectedCount` 函数会被调用，检查选择的数量是否超过预设的限制，然后使用 `validateField` 方法来更新校验状态。如果有错误，错误信息会通过 `<p>` 元素显示出来。