vue3-ts- element-plus新增组件-过滤

 新增组件-所有值为空时过滤

 <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
}