$el.style.display = 'none'没法隐藏el-card

如果你使用的是 Element UI 的 el-card 组件，那么使用 $refs 来获取该组件的 DOM 元素，然后再进行样式操作。示例代码如下：

<template>
  <el-card ref="card">
    <!-- card content -->
  </el-card>
</template>

<script>
export default {
  methods: {
    hideCard() {
      this.$refs.card.$el.style.display = 'none';
    }
  }
}
</script>

这里通过 $refs.card 获取到 el-card 组件的实例，然后通过 $el 属性获取到该组件的 DOM 元素，最后再通过样式操作将其隐藏。

相关问题

el-dialog里的组件通过$el.style.display来显示

是的，el-dialog组件通过$el.style.display来控制显示和隐藏。当el-dialog组件显示时，$el.style.display被设置为"block"，隐藏时则被设置为"none"。这是通过el-dialog组件的visible属性来控制的。当visible为true时，$el.style.display被设置为"block"，为false时则被设置为"none"。

const typeSelect=ref(null) watch(searchTypeClick,()=>{ if(searchTypeClick){ typeSelect.value.$el.style.transform='rotateX(180deg)' } else{ typeSelect.value.$el.style.transform='rotateX(-180deg)' } })

根据您提供的代码，假设`searchTypeClick`是一个响应式变量，表示搜索类型是否被点击，`typeSelect`是一个`ref`对象，保存了一个Vue组件的实例。当`searchTypeClick`变化时，`watch`函数会被调用，根据`searchTypeClick`的值对`typeSelect`的元素进行旋转。

这个代码看起来是正确的，但是需要注意以下几点：

1. 在Vue 3中，`ref`对象的值是一个包含`value`属性的对象，因此要访问`typeSelect`的值，需要使用`typeSelect.value`。

2. 在`watch`函数中，需要使用Vue提供的`nextTick`函数来确保修改DOM样式的代码在下一次DOM更新周期中执行。可以这样修改代码：

const typeSelect = ref(null)
watch(searchTypeClick, () => {
  if (searchTypeClick) {
    nextTick(() => {
      typeSelect.value.$el.style.transform = 'rotateX(180deg)'
    })
  } else {
    nextTick(() => {
      typeSelect.value.$el.style.transform = 'rotateX(-180deg)'
    })
  }
})

3. 在旋转元素时，建议使用CSS动画或过渡来实现，而不是直接修改`transform`属性。这样可以获得更好的动画效果和性能。可以在Vue组件中使用`<transition>`标签或在CSS文件中定义动画类来实现。