vue项目使用解构器：解决类似重写filter-method时，需要另存一份options的问题

本文介绍了在Vue.js项目中如何构建动态form表单，通过根据type值加载不同组件来避免重复代码。针对el-select组件，由于业务需求需要自定义过滤方法，以组合name和id作为标签。为了解决过滤过程的可逆性问题，作者采用了解构器来保存原始数据，并在filter-method中实时过滤数据。这种方式确保了在多个select类型控件中使用时的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单记录一下做项目的过程中遇到的一些问题：

在项目里构建了一个form表单模板，根据type值的不同，加载不同的form组件，省去了在不同的vue文件中重复写表单控件的麻烦，数据由业务父组件传入公共子组件中，每个控件的数据是循环体中得到。

那么问题也来了，因为业务需求，在使用el-select控件时，拼装的label是name+id，所以需要重写filter-method。

property.options是传入的数据，如果是直接修改property.options的值，删选过滤的过程就是不可逆的，显然不符合要求。

这里需要另存一份options的数据，在当前vue文件的data（）中声明一个变量来放数据显然不合理，因为type是select类型的控件可能存在多个。

此时可以使用解构器，在控件外面包裹一层封装好的解构器，将property.options过滤后数据交给singleSelectOptions，select控件数据使用singleSelectOptions

            <template v-if="property.type == 'singleSelect'">
              <DeconStruct
                :data="{
                  singleSelectOptions: JSON.parse(
                    JSON.stringify(property.options)
                  ),
                }"
              >
                <template #default="{ singleSelectOptions }">
                  <el-select
                    v-model="property.value"
                    placeholder="请选择或输入关键字搜索"
                    filterable
                    clearable
                    style="width: 100%"
                    v-el-select-load-more:rangeNumber="loadMoreFun(rangeNumber)"
                    :filter-method="
                      (val) => {
                        if (val) {
                          singleSelectOptions = property.options.filter(
                            (item) => {
                              return (
                                item.name.includes(val) ||
                                item.id.toString().includes(val)
                              );
                            }
                          );
                        } else {
                          singleSelectOptions = property.options;
                        }
                      }
                    "
                  >
                    <el-option
                      v-for="item in singleSelectOptions.slice(0, rangeNumber)"
                      :key="item"
                      :label="`${item.name}(${item.id})`"
                      :value="item.id"
                    >
                      <el-popover
                        v-if="item.name.length >= 12"
                        trigger="hover"
                        :content="`${item.name}(${item.id})`"
                        placement="left"
                        popper-class="singleSelectPopover"
                      >
                        <template #reference
                          ><span>{{
                            item.name.slice(0, 12) + "..."
                          }}</span></template
                        >
                      </el-popover>
                      <span v-else>{{ `${item.name}(${item.id})` }}</span>
                    </el-option>
                  </el-select>
                </template>
              </DeconStruct>
            </template>

以下是封装的解构器


const Deconstruct = function (props, context) {
  const slots = context.slots.default({ ...props.data })
  return slots
}

Deconstruct.props = ['data']
export default Deconstruct