用iview开发时遇到的问题

表单动态Form的校验

 <Form ref="EditLevelModalForm" class="form-wrap" label-position="left" :label-width="80" :model="editRow">
      <div v-for="(item, index) in editRow.items" :key="item.priceId || index">
        <FormItem
          :label="item.containerType"
          :prop="'items.' + index + '.increasePrice'"
          :rules="{ required: true, type: 'number', message: '必填', trigger: 'blur' }"
        >
          <Input class="input" v-model.number="editRow.items[index].increasePrice" placeholder=" " v-checkInt />
        </FormItem>
      </div>
  </Form>

[!NOTE]

循环生成的表单，校验的prop写成动态的:prop="'items.' + index + '.increasePrice'"，它的结构是数组变量名 + 遍历索引 + 元素属性名；

在FormItem上单独设置rules，用于校验简单的情况：:rules="{ required: true, type: 'number', message: '必填', trigger: 'blur' }"，在data中单独设置，适合于复杂，需自定义规则的情况

Select的问题

• 在设置了remote-methods后不需要再根据label和value再筛选一遍了

  mounted(){
      this.$nextTick(() => {
        // 替换过滤函数
        this.$refs.select.validateOption = () => true;
      }); 
  }
  

• 重复输入两次一样的query第二次不发送请求

  第一次我输入了一个query，出现下拉框，第二次又输入相同的query这个时候就不会发送远程请求；也就是不会执行:remote-method的方法

  解决办法：在每次切换的时候清空搜索内容
  this.$refs.select.setQuery(null)
  

• 选中下拉框里面的一个值，但是再去点下拉框的时候就只剩刚才选中的数据了。应该是插件把刚才选中的数据当做的搜索条件，所以需要做的是在进行添加和编辑操作的时候手动把这个值给赋为空值

  this.$refs.select.filterQueryChange = false
  

• 使用remote-methods方法在回车时，解决回车删除不干净的问题

  if (!query) {
      this.$refs.select?.setQuery(null)
      this.modalVisible&&this.getShipCompanyOptions(true)
  }
  其中:modalVisible为弹框的显示和关闭
  

• 在select的下拉框中加入‘全选’和‘取消全选’的功能

  <Select ref="routeCodesRef" placeholder="请选择航线名称" v-model="formData.routeCodes" multiple filterable
          label-in-value clearable>
      <Option value="all" key="all" v-if="carrierLineOptions?.length > 0">
          <p @click="changeAll(formData.routeCodes.length !== carrierLineOptions.length)">{{
              formData.routeCodes.length !== carrierLineOptions.length ?
              "全选" : "取消全选" }}</p>
      </Option>
      <Option v-for="item in carrierLineOptions" :value="item.value" :key="item.value"
              :label="item.label" />
  </Select>
  
  changeAll(isTrue) {
              const self = this
              setTimeout(() => {
                  self.formData.routeCodes = []
                  if (isTrue) {
                      self.carrierLineOptions.forEach(temp => {
                          self.formData.routeCodes.push(temp.value)
                      })
                  }
          }, 0)
     },