vue3 - 请教下，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

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

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

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

是不是把这一块单独封装成组件 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则可以在不同地方用 在不同场景用不同组件。
个人看法 楼主根据实际情况考虑