mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
1.5 KiB
1.5 KiB
layout |
---|
templateLayout |
<template>
<Wb-form ref="formValidate" :label-width="100">
<Form-item label="输入框" v-for="(item, index) in textList" :key="index" :prop="item.text"
:rule="[{required: true, message: '项目' + (item.text) +'不能为空'}]">
<wb-input v-model="item.value" placeholder="请输入"></wb-input>
</Form-item>
<Form-item>
<Wb-button type="primary" @click="click">提交</Wb-button>
<Wb-button type="ghost" style="margin-left: 8px" @click="reset">重置</Wb-button>
<Wb-button type="primary" style="margin-left: 8px" @click="add">增加</Wb-button>
<Wb-button type="primary" style="margin-left: 8px" @click="remove">减少</Wb-button>
</Form-item>
</Wb-form>
</template>
<script>
export default {
data(){
return {
textList: [{
text: 'text0',
value: ''
}],
}
},
methods: {
add() {
this.textList.push({
text: 'text' + this.textList.length,
value: ''
})
},
remove() {
this.textList.splice(this.textList.length - 1, 1)
},
click() {
this.$refs.formValidate.validate((valid, errors) => {
console.log(valid, errors)
})
},
reset() {
this.$refs.formValidate.resetFields()
},
}
}
</script>