iView各种组件清空重置

表单

注意事项： prop属性要和表单对象中的属性名一致
html:

<Form ref="formFilter" :model="formFilter" inline :label-width="80">
    <FormItem label="账号：" prop="account">
        <Input type="text" v-model="formFilter.account" clearable></Input>
    </FormItem>
    <FormItem>
        <Button type="ghost" @click="handleReset('formFilter')">重置</Button>
    </FormItem>
</Form>

js:

data () {
    return {
        formFilter: {},
    }
},
methods: {
    handleReset (name) {
        // 或者手动将各个属性置空
        this.$refs[name].resetFields()       
    }
} 

穿梭框

html: 首先通过ref获取到穿梭框

<Transfer
    ref="refTransfer">
</Transfer>

js: 在想要清除的方法中添加以下代码

// 清空穿梭框搜索条件
this.$refs.refTransfer.$children[0].query = ''
this.$refs.refTransfer.$children[2].query = ''
// 清空穿梭框复选框
this.$refs.refTransfer.$children[0].toggleSelectAll()
this.$refs.refTransfer.$children[2].toggleSelectAll()

Select组件

this.$refs.element.clearSingleSelect()

DatePicker/TimePicker组件

this.$refs.element.handleClear()

Table组件

 this.$refs.element.selectAll(flase)

网站导航

网站导航