typescript - Vue3 + TypeScript + Element Plus 下拉框使用v-for后空值无法渲染问题？

Question

vue3+ts+element-plus
使用下拉框时，部分值使用v-for循环出来，然后发现值是''，但下拉框不会渲染出来全部

<el-select
            v-model="listQuery.businessId"
            placeholder="请选择业务类型"
            style="width: 200px"
            :empty-values="[null, undefined]"
            clearable
            @clear="listQuery.businessId=''"
            @keyup.enter="handleSearch"
          >
            <el-option label="全部" value=""></el-option>
            <el-option v-for="val in businessOptions" :key="val.businessId" :label="val.businessName" :value="val.businessId"></el-option>
          </el-select>

如果在businessOptions里直接加上全部，就可以展示出来

state.businessOptions = res.item && res.item.businessList || []
      state.businessOptions.unshift({
        businessId: '',
        businessName: '全部'
      })

但是这个值还得用在其他地方，因此不想加上全部
能否解决这个问题

Answer 1

在Vue 3和Element Plus中，如果你想要下拉框（el-select）能够渲染一个值为空字符串（''）的选项，并且这个选项是通过v-for循环动态生成的，那么你需要确保businessOptions数组中包含一个对象的businessId属性值为空字符串。

在你的例子中，你提到直接往businessOptions数组中添加一个具有空字符串businessId的对象可以解决问题，但是你不希望这样做，因为该值在其他地方还有用。然而，解决这个问题的一个可能的方法是使用一个计算属性（computed property）来返回一个新的数组，这个新数组包含了原始的businessOptions数组以及一个额外的对象（表示“全部”选项）。

下面是一个示例代码，展示了如何使用计算属性来实现这一点：

<template>
  <el-select
    v-model="listQuery.businessId"
    placeholder="请选择业务类型"
    style="width: 200px"
    :empty-values="[null, undefined]"
    clearable
    @clear="listQuery.businessId=''"
    @keyup.enter="handleSearch"
  >
    <el-option label="全部" value=""></el-option>
    <el-option
      v-for="val in computedBusinessOptions"
      :key="val.businessId"
      :label="val.businessName"
      :value="val.businessId"
    ></el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  data() {
    return {
      listQuery: {
        businessId: '',
      },
      businessOptions: [], // 假设这是你从某个地方获取的原始业务选项数组
    };
  },
  computed: {
    computedBusinessOptions() {
      // 返回一个包含“全部”选项和原始业务选项的新数组
      return [
        { businessId: '', businessName: '全部' },
        ...this.businessOptions,
      ];
    },
  },
  methods: {
    handleSearch() {
      // 处理搜索逻辑...
    },
    // 其他方法...
  },
  // 其他选项...
});
</script>

在这个例子中，computedBusinessOptions计算属性返回了一个新的数组，它首先包含一个表示“全部”选项的对象（{ businessId: '', businessName: '全部' }），然后是原始的businessOptions数组中的所有元素。由于这个新数组是通过计算属性得到的，所以它不会修改原始的businessOptions数组，从而允许你在其他地方继续使用原始的数组数据。