el-form-item的key

场景

在一个具有不同tab的搜索表单里面，需要根据分校的选择（以及人员的身份：总部的选择全部分校的时候才有规则，其余没有）来判断创建时间的验证规则，分校为全部时创建时间默认一年且有规则，分校为具体分校时创建时间清空且没有规则。有三个页面要使用到这个搜索表单，且有些许不同。

实现

把这个带tab的搜索表单写为组件。

• 所有的搜索项都写在一起，便于收集信息。根据所选tab的不同来判断该搜索项是否需要展示即可。

<el-form-item v-if="!['1', '4'].includes(customerTypeTab)" label="报班意向:">
  <el-select v-model="searchForm.classIntentions" clearable multiple filterable collapse-tags placeholder="请选择">
    <el-option v-for="(item, i) in levelList" :key="i" :label="`${item.customerLabel}-${item.customerType}`" :value="item.customerLabel" />
  </el-select>
</el-form-item>

• 通过传入的参数不同来判断是否需要增加或者删除tab

// 销售员多一个tab页
if (this.currentPage === 'salesman') {
  this.INTERFACE_TYPE_LIST.splice(1, 0, { label: '新分配线索', value: '7' })
}

• 通过监听分校的改变来控制创建时间 rules 的变化
  :rules="['salesman', 'branch'].includes(currentPage)||hasBranch ? [] : customRules.aYearTimeRange"

'searchForm.branchSchool'() {
 if (this.currentPage === '') {
  if (this.searchForm.branchSchool && this.searchForm.branchSchool.JiGouName !== '全部') {
     this.searchForm.createTime = []
     this.hasBranch = true
   } else {
     this.searchForm.createTime = [
       dayjs(dayjs().subtract(1, 'years').format('YYYY-MM-DD 00:00:00')).valueOf(),
       dayjs(dayjs().format('YYYY-MM-DD 23:59:59')).valueOf()
     ]
     this.hasBranch = false
   }
 }
}

问题

在 A tab页的创建时间选择了一个不符合规则的时间段，提示正常出现，这个时候点击B tab页。

• 提示会跟着出现且在一个错误的位置
• 这时的创建时间的规则也同时失效
  

问题分析

略。。。

问题解决

给form-item加key

<el-form-item label="创建时间:" prop="createTime" :rules="['salesman', 'branch'].includes(currentPage)||hasBranch ? [] : customRules.aYearTimeRange">
  <el-date-picker
    v-model="searchForm.createTime"
    unlink-panels
    style="width:280px"
    type="daterange"
    value-format="timestamp"
    :default-time="['00:00:00', '23:59:59']"
    :editable="false"
    :clearable="['salesman', 'branch'].includes(currentPage)||hasBranch"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</el-form-item>