请教下，element-plus中怎么控制父级元素的隐藏？

Question

我封装了element-plus中的form的组件，代码如下：

// TagSelectItem.vue
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { TagApi } from "@/api/project";
import { TagGroupApiProps } from "@/types/project";

const props = defineProps({
  modelValue: {
    required: true,
    type: [Number, String, Array<Number>, Array<String>]
  },
  tagLists: { required: false, type: Array<TagGroupApiProps>, default: [] },
  multiple: { required: false, type: Boolean, default: true },
  showLabel: { required: false, type: Boolean, default: true },
  prop: { required: false, type: String, default: "tag_ids" },
  maxCollapseTags: { required: false, type: Number, default: 7 }
});
const emits = defineEmits(["update:modelValue", "click"]);
const select = (value: number[]) => {
  emits("update:modelValue", value);
  emits("click", value);
};
const lists = ref<TagGroupApiProps[]>([]);
onMounted(async () => {
  if (props.tagLists.length !== 0) {
    lists.value = props.tagLists;
  } else {
    lists.value = await TagApi.select();
  }
});
</script>

<template>
  <el-form-item v-if="showLabel" label="标签" :prop="prop">
    <el-select
      :model-value="modelValue"
      class="w-full"
      filterable
      :multiple="multiple"
      clearable
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="maxCollapseTags"
      placeholder="请选择标签，输入内容可筛选"
      @change="select"
    >
      <el-option
        v-for="item in lists"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-select
    v-else
    :model-value="modelValue"
    class="w-full"
    filterable
    :multiple="multiple"
    clearable
    collapse-tags
    collapse-tags-tooltip
    :max-collapse-tags="maxCollapseTags"
    placeholder="请选择标签，输入内容可筛选"
    @change="select"
  >
    <el-option
      v-for="item in lists"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

使用组件：

默认是展示标签
<tag-select-item v-model="tag_ids" />

通过show-label 隐藏 el-form-item
<tag-select-item v-model="tag_ids" :show-label="false" />

为了不显示 el-form-item，<el-select>的代码写了一遍，又复制了一遍。
请教下有没有啥好的办法，可以控制 el-form-item 的隐藏与展示，同时让<el-select>的代码只写一遍？
还有就是，组件这样写有没有不合理的地方。
欢迎指正，谢谢。

Answer 1

是不是把这一块单独封装成组件 tag-select

然后这块封装成另一个组件
<el-form-item label="标签" :prop="prop">

<tag-select v-model="tag_ids" />

</el-form-item>
---> <tag-select-item/>

两个组件的使用场景不一致 tag-select-item 只会在el-form表单下才用 tag-select则可以在不同地方用 在不同场景用不同组件。
个人看法 楼主根据实际情况考虑

Answer 2

观察form-item的渲染方式，发现加了label会渲染出label dom

label值为空则不会渲染，但是出多出margin-left的多余样式

所以针对你的需求可以这样修改：

<el-form-item :label="showLabel ? '标签' : '' " :prop="prop">
<!-- 不使用showLabel&&'标签'  是因为label接受的是string类型，showLabel为false的时候值会变为Boolean类型 -->

然后再加点样式处理下,这里注意不要污染全局，加个父级或者scoped。其他的样式可能需要再调试处理下

.el-form-item__content {
margin-left: 0
}

---

组件的设计需要保持单一原则，如果为了展示2个样式，可以在调用的地方去处理，而不是在组件内部去处理业务

Answer 3

el-form-item 没有必要放到封装好的 tag-select 组件中。
做好功能单一，你的 tag-select 是标签选择器，不是标签选择器表单项。

哪个地方用到了表单再在标签器外面用 el-form-item 包裹。