【持续】iview框架使用过程中的问题、心得

使用了一段时间的iView框架了，遇到不少问题，不过因为懒没记录，想想还是记录一下吧。

文章前提是对Vue，iView框架有使用经历的，起码能看懂撒。

1.iView中用到render函数，render函数可以渲染普通的html标签，也可以渲染框架中的组件或自定义组件。

渲染组件时，对事件的监听on可能无效，建议尝试用nativeOn

return h('Checkbox', {
    props: {
        'value': value === '0'
    },
    nativeOn: {
        change: () => {
            params.row.status = '1'
            console.log(11111111)
        }
    }
}, '置顶')

Checkbox要与checkbox标签区分开，前者是iView组件。

2.接上个代码，有个需求是，在列表中某一列有两个checkbox，分别是推荐、置顶，只能二选一或一个不选，类似于很多项目中的停用/启用。详细说明就是在render函数里改变当前行的属性，尽量不执行列表的刷新操作。

比较关键的代码就是params.row.status = '1'

上个代码

render: (h, params) => {
    let value = params.row.status
    return [
        h('Checkbox', {
            props: {
                'value': value === '0'
            },
            nativeOn: {
                change: () => {
                    params.row.status = params.row.status === '0' ? '2' : '0'
                }
            }
        }, '推荐'),
        h('Checkbox', {
            props: {
                'value': value === '1'
            },
            nativeOn: {
                change: () => {
                    params.row.status = params.row.status === '1' ? '2' : '1'
                }
            }
        }, '置顶')
    ]
}

解释一下 status就是当前列的属性值，勾选推荐时，值为0，勾选置顶时，值为1，已勾选再次点击则取消勾选，值为2。

这个的重要性在于，我之前一直认定render函数里params.row是只读的，没想到可以赋值，而且不需要手动触发其他或刷新，所在行的render函数都能随着赋值而刷新！很棒。

3.iview框架的select控件在form表单使用过程中，如果遇到一些互相关联验证的需求，比如：

// template
<Row :gutter="32">
  <Col span="8">
    <FormItem label="出库时间" label-position="top" prop="outputTime">
      <br />
      <DatePicker
        type="date"
        :clearable="true"
        :confirm="false"
        placeholder="请选择出库时间"
        v-model="formData.outputTime"
        ref="outputTime"
        style="width: 100%"
        :disabled="isSee"
        @on-change="blurOutput(1)"
      ></DatePicker>
    </FormItem>
  </Col>
  <Col span="8">
    <FormItem label="运输类型" label-position="top" prop="outputType">
      <Select
        :clearable="true"
        v-model="formData.outputType"
        ref="outputType"
        :disabled="isSee"
        placeholder="请选择运输类型"
        @on-change="blurOutput(2)"
      >
        >
        <Option value="1">普通运输</Option>
        <Option value="2">冷链运输</Option>
      </Select>
    </FormItem>
  </Col>
  <Col span="8">
    <FormItem label="责任人" label-position="top" prop="outputPerson">
      <Input
        type="text"
        v-model.trim="formData.outputPerson"
        placeholder="请输入责任人"
        ref="outputPerson"
        :maxlength="10"
        :disabled="isSee"
        @on-blur.stop="blurOutput(3)"
      ></Input>
    </FormItem>
  </Col>
</Row>

// script
// 运输环节失焦行为
blurOutput(value) {
  switch (value) {
    case 1: // 出库时间
      this.$refs.formValidate.validateField('outputType')
      this.$refs.formValidate.validateField('outputPerson')
      break
    case 2: // 运输类型
      this.$refs.formValidate.validateField('outputTime')
      this.$refs.formValidate.validateField('outputPerson')
      break
    case 3: // 责任人
      this.$refs.formValidate.validateField('outputTime')
      this.$refs.formValidate.validateField('outputType')
      break
    default:
      break
  }
},

// validateRules
// 运输环节
outputTime: [
  // { type: 'date', message: '请选择出库时间', trigger: 'change' },
  {
    validator(rule, value, callback) {
      if (
        (_this.formData.outputPerson || _this.formData.outputType) &&
        !value
      ) {
        callback(new Error('请选择出库时间'))
      } else {
        callback()
      }
    },
    message: '请选择出库时间',
    trigger: 'change'
  }
],
outputType: [
  { message: '请选择运输类型', trigger: 'change' },
  {
    validator(rule, value, callback) {
      if (
        (_this.formData.outputPerson || _this.formData.outputTime) &&
        !value
      ) {
        callback(new Error('请选择运输类型'))
      } else {
        callback()
      }
    },
    message: '请选择运输类型',
    trigger: 'change'
  }
],
outputPerson: [
  {
    message: '请输入责任人',
    transform: value => (value ? value.trim() : ''),
    trigger: 'blur'
  },
  {
    validator(rule, value, callback) {
      if (
        (_this.formData.outputTime || _this.formData.outputType) &&
        !value
      ) {
        callback(new Error('请输入责任人'))
      } else {
        callback()
      }
    },
    message: '请输入责任人',
    trigger: 'blur'
  },
  {
    validator: (rule, value, callback) =>
      validateChineseAndEnglish(rule, value, callback),
    trigger: 'blur'
  }
],

要么3个属性都不填，要么填了一个其他都变成必填，这种关联验证，select标签偶尔会出现选中值，但是验证没消失的情况。经过测试发现，主要是发生在由空值去选择value值为1的时候，且不走select的on-change事件。

找了半天也不知道为啥，现在将解决办法记录一下：

1.找到validate的storageType，也就是下拉框的验证，将!value改为_this.formData.outputType 是否为空，因为select在可清空选项下点击“x”号拿到的值为undefined，再选值后可能会产生“value没值，但formData.outputType有值”的情况，所以验证formData最佳。

if (
  (_this.formData.outputPerson || _this.formData.outputTime) &&
  (_this.formData.outputType == null || _this.formData.outputType == undefined)
) {
  callback(new Error('请选择运输类型'))
}

2.互相验证干扰下，会出现下拉框从空值到选择value为1的选项后，验证依旧提示，并且实际值为null，但是选择value为2、3的选项可以，建议option的值从2起。

【持续】iview框架使用过程中的问题、心得

猜你喜欢