# UI

---

笔记📒

菜单栏：

```vue
<el-menu> // 这是一个存放menu菜单的容器【类似div】
    <el-submenu> // 这是一级菜单 [同样也是可以存放图标的。]

        <el-menu-item> // 这是二级菜单 和 一级菜单一样可以存放图标

        </el-menu-item>
    </el-submenu>
</el-menu>
```

## 对于ElementUI中的图片加载的问题所提供的解决方法

要添加一个动态加载的效果，可以使用Vue.js的过渡(transition)功能。您可以在el-image组件上使用Vue.js的`<transition>`元素，并为其指定一个过渡名称，然后在`<el-image>`标签中添加一个"v-if"指令来控制图片的显示和隐藏。当图片加载完成时，将v-if指令的值设置为true，这将触发过渡效果。以下是示例代码：

```html
<template>
  <div class="block">
    <span class="demonstration">自定义</span>
    <transition name="fade">
      <el-image v-if="loaded" :src="src">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'your-image-url-here',
      loaded: false
    }
  },
  mounted() {
    // Simulate image loading
    setTimeout(() => {
      this.loaded = true
    }, 2000)
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
```

在上面的代码中，我们使用了Vue.js的`<transition>`元素，并为其指定了一个过渡名称"fade"。在`<el-image>`标签中，我们使用了v-if指令来控制图片的显示和隐藏。在mounted钩子函数中，我们模拟了图片加载的过程，并在2秒后将loaded属性设置为true，这将触发过渡效果。最后，我们在`<style>`标签中定义了过渡效果的样式。

## 当图片加载失败后的一些解决方法

如果图片加载失败，可以使用Vue.js的错误处理(error handling)功能来显示错误信息。您可以在`<el-image>`标签中添加一个"error"事件监听器，然后在事件处理程序中将loaded属性设置为false，并显示一个错误信息。以下是示例代码：

```html
<template>
  <div class="block">
    <span class="demonstration">自定义</span>
    <transition name="fade">
      <el-image v-if="loaded" :src="src" @error="handleError">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
      <div v-else class="error-message">
        图片加载失败，请稍后再试。
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'your-image-url-here',
      loaded: false,
      error: false
    }
  },
  mounted() {
    // Simulate image loading
    setTimeout(() => {
      this.loaded = true
    }, 2000)
  },
  methods: {
    handleError() {
      this.loaded = false
      this.error = true
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.error-message {
  color: red;
  font-weight: bold;
}
</style>
```

在上面的代码中，我们在`<el-image>`标签中添加了一个"error"事件监听器，并在事件处理程序中将loaded属性设置为false，并将error属性设置为true。在`<transition>`元素中，我们使用了v-else指令来显示一个错误信息。最后，我们在`<style>`标签中定义了错误信息的样式.

## 对于table 的弹窗基本操作

// 添加部门的逻辑（这里只是一个示例，你需要根据实际需求实现添加部门的功能）

```vue3

// TODO 渲染后端数据
const tableColumn = ref([
  { id: 1, prop: "id", label: "序号" },
  { id: 2, prop: "workId", label: "部门编号" },
  { id: 3, prop: "workName", label: "部门名称" },
  { id: 4, prop: "workDescription", label: "备注" },
  { id: 5, prop: "createDate", label: "部门创建时间" },
]);

 const addWork = async () => {
   console.log(addForm.workId);
   if (!addForm.workId || !addForm.workName) {
     ElMessage.warning("请填写部门编号和部门名称");
     return;
   }
   // 在这里调用后端接口添加部门，然后刷新部门列表
   // 例如：await addWorkAPI(addForm);
   const reslt = await addWork("/work/add", addForm);
   console.log(reslt);
   ElMessage.success("添加成功");
   addDialogVisible.value = false;
   addForm.workId = "";
   addForm.workName = "";
   addForm.workDescription = "";
   // 刷新部门列表
   getWorkListData("/work/page", queryInfo.info);
 };
 ```