I have been using the iView framework for a while, and I have encountered many problems, but I didn’t record it because I was lazy, so let’s record it after thinking about it.
The premise of the article is that someone who has experience in using the Vue and iView frameworks can at least understand it.
1. The render function is used in iView. The render function can render ordinary html tags, as well as components in the frame or custom components.
When rendering components, the on event listener may not be effective, it is recommended to try nativeOn
return h('Checkbox', {
props: {
'value': value === '0'
},
nativeOn: {
change: () => {
params.row.status = '1'
console.log(11111111)
}
}
}, '置顶')
Checkbox should be distinguished from checkbox label, the former is iView component.
2. Continuing from the previous code, there is a requirement that there are two checkboxes in a column in the list, which are recommended and top, and only one of the two can be selected or one can not be selected, which is similar to the deactivation/enablement in many projects. The detailed description is to change the properties of the current row in the render function, and try not to perform the refresh operation of the list.
The more critical code is params.row.status = '1'
last code
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'
}
}
}, '置顶')
]
}
Explain that status is the attribute value of the current column. When recommended is checked, the value is 0; when top is checked, the value is 1; if it is checked and clicked again, the value is 2.
The importance of this is that I have always believed that params.row in the render function is read-only. I didn’t expect that it can be assigned, and there is no need to manually trigger other or refresh. The render function of the row can be refreshed with the assignment! great.
3. During the use of the form form, the select control of the iview framework encounters some interrelated verification requirements, such as:
// 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'
}
],Either none of the three attributes are filled in, or one of the others is filled in and all other fields become mandatory. In this kind of associated verification, the select tag occasionally has a selected value, but the verification does not disappear. After testing, it is found that it mainly occurs when the value value is 1 is selected from a null value, and the on-change event of the select is not used.
After searching for a long time, I don't know why, so I will record the solution now:
1. Find the storageType of validate, that is, the validation of the drop-down box, and change the !value to _this.formData.outputType to see if it is empty, because the value obtained by clicking the "x" under the option that can be cleared is undefined, and then select After the value, there may be a situation of "value has no value, but formData.outputType has value", so it is best to verify formData.
if (
(_this.formData.outputPerson || _this.formData.outputTime) &&
(_this.formData.outputType == null || _this.formData.outputType == undefined)
) {
callback(new Error('请选择运输类型'))
}2. Under the interference of mutual authentication, the drop-down box will change from empty value to the option with value 1, the verification still prompts, and the actual value is null, but it is ok to choose the option with value 2 or 3. It is recommended that the value of option be changed from 2 rise.