新增组件-所有值为空时过滤
<el-form-item label="家庭成员"><divclass="username-box"v-for="(item, index) in form.namelist":key="index"><div>姓名:<el-input v-model="item.name" placeholder="姓名"></el-input></div><div>性别:<el-selectv-model="item.ger"class="m-2"placeholder="性别"size="large"><el-optionv-for="item in opget":key="item.value":label="item.label":value="item.value"/></el-select></div><div>年龄:<el-input v-model="item.age" placeholder="年龄"></el-input></div><div><el-button type="warning" @click.prevent="removeDomain(item)">删除</el-button></div></div><div><el-buttontype="success":icon="Plus"circle@click="addDomain()"></el-button></div>
</el-form-item>
<style lang="less" scoped>
.username-box {display: flex;align-items: flex-end;div {margin-right: 10px;.el-input {width: 200px;}}
}
</style>
<script setup lang="ts">
import { reactive } from 'vue'
import { Plus, Check } from '@element-plus/icons-vue'
const form = reactive({namelist: [{name: '',age: '',ger: '',},],
})
const opget = [{ value: '0', label: '女' },{ value: '1', label: '男' },
]
const addDomain = () => {console.log('添加成员')form.namelist.push({ name: '', age: '', ger: '' })
}
const removeDomain = (item) => {const index = form.namelist.indexOf(item)if (index !== -1) {form.namelist.splice(index, 1)}
}
提交:
function handleOk() {const filteredList = form.namelist.filter((item) => {const values = Object.values(item)return !values.every((value) => value === '') //判断所有值为空})form.namelist = filteredList
}