Vue3中能否简化父级model属性的绑定表达式？

Element Plus的el-form-item本身没有直接支持指定子属性后简化v-model绑定的特性，但可以通过Vue的原生特性或组件封装来实现类似效果，以下是几种实用方案：

方案1：使用计算属性简化单个字段绑定 #

在<script setup>中为嵌套的filter对象定义计算属性，直接在模板中使用短名称：

// script setup
import { reactive, computed } from 'vue'

const filters = reactive({
  name: { op: 'like', value: '' },
  age: { op: 'gt', value: '' }
})

// 定义计算属性简化绑定
const nameFilter = computed(() => filters.name)
const ageFilter = computed(() => filters.age)

模板中直接使用短表达式：

<el-form :model="filters">
  <el-form-item label="名称">
    <el-select v-model="nameFilter.op">
      <el-option label="包含" value="like" />
      <el-option label="等于" value="eq" />
    </el-select>
    <el-input v-model="nameFilter.value" />
  </el-form-item>
  
  <el-form-item label="年龄">
    <el-select v-model="ageFilter.op">
      <el-option label="大于" value="gt" />
      <el-option label="小于" value="lt" />
    </el-select>
    <el-input v-model="ageFilter.value" />
  </el-form-item>
</el-form>

方案2：利用模板作用域+循环批量处理多个filter #

如果filters是多个结构一致的对象，可以用v-for遍历，直接在循环体内使用子属性：

<el-form :model="filters">
  <el-form-item 
    v-for="(filter, key) in filters" 
    :key="key" 
    :label="key === 'name' ? '名称' : '年龄'"
  >
    <el-select v-model="filter.op">
      <!-- 根据key渲染不同选项 -->
      <el-option v-if="key === 'name'" label="包含" value="like" />
      <el-option v-if="key === 'name'" label="等于" value="eq" />
      <el-option v-if="key === 'age'" label="大于" value="gt" />
      <el-option v-if="key === 'age'" label="小于" value="lt" />
    </el-select>
    <el-input v-model="filter.value" />
  </el-form-item>
</el-form>

这种方式无需额外定义变量，直接通过循环的filter变量访问op和value，大幅简化绑定表达式。

方案3：封装通用筛选项组件（最推荐） #

如果项目中大量使用这种嵌套结构的筛选表单，封装一个通用组件可以彻底简化代码：

<!-- FilterFormItem.vue -->
<template>
  <el-form-item :label="label">
    <el-select v-model="filter.op" :placeholder="`选择${label}操作符`">
      <slot name="options" :filterKey="filterKey" />
    </el-select>
    <el-input v-model="filter.value" :placeholder="`输入${label}`" />
  </el-form-item>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  label: String,
  filterKey: String,
  filters: Object
})

// 计算属性获取当前筛选项
const filter = computed(() => props.filters[props.filterKey])
</script>

父组件中使用：

<el-form :model="filters">
  <FilterFormItem label="名称" filterKey="name" :filters="filters">
    <template #options>
      <el-option label="包含" value="like" />
      <el-option label="等于" value="eq" />
    </template>
  </FilterFormItem>
  
  <FilterFormItem label="年龄" filterKey="age" :filters="filters">
    <template #options>
      <el-option label="大于" value="gt" />
      <el-option label="小于" value="lt" />
    </template>
  </FilterFormItem>
</el-form>

这种方式不仅简化了绑定，还提高了代码复用性，后期修改筛选逻辑只需维护组件即可。

内容的提问来源于stack exchange，提问作者WestFarmer