ElementUI是一款基于Vue.js的前端UI框架，旨在于简化web界面的开发。以下是一些使用ElementUI的小技巧：

1. 使用el-form-item的label-width属性来控制标签宽度，而不是直接在样式中设置。

<el-form-item label="用户名" label-width="80px">
  <el-input v-model="form.name"></el-input>
</el-form-item>

2. 使用el-table的height属性可以指定表格的高度，并且开启virtual-scroll-slice-size和virtual-scroll-full-height来实现虚拟滚动。

<el-table :data="tableData" height="200" virtual-scroll-slice-size="10" virtual-scroll-full-height="300">
  <!-- table columns -->
</el-table>

3. 使用el-select的multiple属性可以实现多选下拉框，并通过:collapse-tags在选中项过多时折叠显示。

<el-select v-model="selectedOptions" multiple :collapse-tags>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

4. 使用el-pagination组件可以快速实现分页功能，并通过background属性开启背景色。

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="currentPage"
  :page-sizes="[100, 200, 300, 400]"
  :page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

5. 使用el-popover组件可以快速实现hover弹窗功能。

<el-popover
  trigger="hover"
  placement="top"
  width="200"
  content="这是一段内容, 这是一段内容, 这是一段内容">
  <el-button slot="reference">悬停触发</el-button>
</el-popover>

以上是一些使用ElementUI的小技巧，实际使用时可以根据具体需求选择合适的组件和属性。

由于提供的链接是对一个完整项目的引用，而不是一个具体的代码问题，因此我无法提供一个具体的代码解决方案。但我可以提供一个概括的解决步骤，以便开发者能够理解如何使用Vue、ElementUI和Node.js来创建一个学生宿舍报修管理系统。

1. 需求分析：理解系统的功能需求，包括报修流程、用户权限管理、数据统计等。
2. 设计数据库：创建数据库模型，用于存储报修信息、用户信息和管理员信息等。
3. 构建前端：使用Vue.js创建前端界面，使用ElementUI来快速搭建界面布局和组件。
4. 编写后端API：使用Node.js和Express框架创建RESTful API，提供前端与数据库交互的接口。
5. 集成前后端：配置Vue项目中的API接口地址，使前端能够通过AJAX请求与后端API进行数据交换。
6. 测试：进行系统测试，确保所有功能按预期工作，并解决发现的问题。
7. 部署：将构建好的前端和后端部署到服务器上，确保用户可以通过浏览器访问系统。

这只是一个概括的步骤，具体实施时可能需要考虑更多细节，如权限控制、异常处理、性能优化等。

由于提供整个系统的源代码不符合平台的原创精神，我将提供一个简化版本的核心功能示例，例如登录和员工管理模块。

后端（SpringBoot部分）

// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService;
 
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest request) {
        return ResponseEntity.ok(userService.login(request));
    }
 
    @GetMapping("/list")
    public ResponseEntity<?> getAllUsers() {
        return ResponseEntity.ok(userService.getAllUsers());
    }
 
    // 其他员工管理API...
}
 
// UserService.java
@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;
 
    public UserDto login(LoginRequest request) {
        // 登录逻辑...
    }
 
    public List<UserDto> getAllUsers() {
        // 获取所有员工逻辑...
    }
 
    // 其他员工管理方法...
}

前端（Vue+ElementUI部分）

// Login.vue
<template>
  <el-form @submit.native.prevent="login">
    <el-form-item>
      <el-input v-model="loginForm.username" placeholder="Username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="loginForm.password" placeholder="Password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">Login</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      this.$http.post('/api/user/login', this.loginForm)
        .then(response => {
          // 登录成功处理逻辑...
        })
        .catch(error => {
          // 登录失败处理逻辑...
        });
    }
  }
};
</script>
 
// EmployeeList.vue
<template>
  <el-table :data="employees">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="email" label="Email"></el-table-column>
    <!-- 其他员工信息列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      employees: []
    };
  },
  created() {
    this.fetchEmployees();
  },
  methods: {
    fetchEmployees() {
      this.$http.get('/api/user/list')
        .then(response => {
          this.employees = response.data;
        })
        .catch(error => {
          // 错误处理逻辑...
        });
    }
  }
};
</script>

以上代码仅展示了登录和员工列表的简单示例，实际系统中会有更多的功能和细节。这个简化版本

ElementUI的Upload组件用于文件上传，其核心功能是处理文件选择、上传动作以及与后端的交互。以下是一个简化的上传流程代码示例：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'https://your-upload-api.com/upload'
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以进行文件格式、大小等校验
      // 返回 `false` 可以停止上传
      // 可以返回 `Blob` 对象作为文件内容
      // 也可以返回 `Promise` 对象，`resolve` 时会执行上传，`reject` 会停止上传
      return true;
    },
    handleSuccess(response, file, fileList) {
      // 成功回调函数
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 错误回调函数
      console.error('Error during upload:', err);
    }
  }
};
</script>

在这个例子中，我们定义了一个uploadUrl作为上传的API地址，并提供了beforeUpload、handleSuccess和handleError方法来处理文件上传前的校验、上传成功后的响应以及上传失败的情况。这个简化的流程展示了el-upload组件的基本使用方法，并且可以根据具体需求进行功能扩展。

在Element UI中实现表格全选功能，并在翻页时保持选中状态，你可以使用table组件的selection属性以及current-change事件。以下是一个简单的实现示例：

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    @current-change="handleCurrentChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentPageChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 已选择的行
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
    };
  },
  methods: {
    // 初始化表格数据
    fetchData() {
      // 模拟请求数据
      this.total = 100; // 假设总共有100条数据
      this.tableData = Array.from({ length: this.pageSize }, (_, index) => ({
        id: (this.currentPage - 1) * this.pageSize + index + 1,
        // 其他数据
      }));
    },
    // 选择变化时的回调
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 当前行变化时的回调
    handleCurrentChange(currentRow, oldCurrentRow) {
      if (currentRow) {
        this.$refs.multipleTable.toggleRowSelection(currentRow, true);
      }
      if (oldCurrentRow) {
        this.$refs.multipleTable.toggleRowSelection(oldCurrentRow, false);
      }
    },
    // 每页显示条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    // 当前页改变
    handleCurrentPageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在这个示例中，我们使用了el-table组件的selection列来实现全选功能，并且利用了current-change事件来保证在翻页时保持选中状态。handleSelectionChange方法用于处理用户的选择变化，而handleCurrentChange方法确保了当前行的选中状态与用户的选择一致。翻页时，通过调用fetchData方法重新加载数据，并通过toggleRowSelection方法来保持选中状态。

在Element UI中，可以使用<el-aside>组件来创建侧边栏，并通过响应式布局的特性来实现在不同屏幕尺寸下的显示效果。

以下是一个简单的例子，展示如何使用Element UI的响应式布局特性来实现响应式侧边栏：

<template>
  <el-container class="responsive-container">
    <!-- 侧边栏 -->
    <el-aside width="auto" :class="{'hidden-xs-only': !isCollapse}">
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </el-menu-item>
        <!-- 更多菜单项 -->
      </el-menu>
    </el-aside>
    
    <!-- 主要内容区 -->
    <el-main>
      <!-- 这里是主要内容 -->
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
 
<style>
.responsive-container {
  /* 响应式布局 */
  margin-left: 200px;
  padding: 0 20px;
}
 
.el-aside {
  background-color: #304156;
  transition: width 0.3s;
}
 
.el-main {
  background-color: #e9eef3;
  color: #333;
}
 
.hidden-xs-only {
  width: 64px !important; /* 收缩后的宽度 */
}
 
/* 媒体查询实现响应式 */
@media (max-width: 768px) {
  .responsive-container {
    margin-left: 0;
  }
  .hidden-xs-only {
    width: auto !important; /* 屏幕尺寸小于768px时展开侧边栏 */
  }
}
</style>

在这个例子中，侧边栏默认是展开的，当屏幕宽度小于768像素时，通过媒体查询，.hidden-xs-only 类中的样式会覆盖 .el-aside 的样式，使得侧边栏自动隐藏并通过按钮展开（如果Element UI的<el-menu>组件支持这种行为的话）。这样就实现了侧边栏的响应式布局。

由于提问中包含了大量的技术关键词，并且没有明确的问题描述，我将提供一个简单的例子，展示如何使用Node.js、Vue和Element UI创建一个简单的通用功能。

假设我们要创建一个简单的表单，用户可以在其中输入他们的名字，并使用Element UI的按钮来提交。

首先，确保你已经安装了Node.js和Vue CLI。

1. 创建一个新的Vue项目（如果你还没有）:

vue create university-evaluation-system

2. 进入项目目录并安装Element UI:

cd university-evaluation-system
vue add element

3. 编辑Vue组件。在 src/components 下创建一个名为 NameForm.vue 的新文件，并添加以下内容:

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="名字">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('提交的名字:', this.form.name);
      // 这里可以添加提交到后端的逻辑
    }
  }
};
</script>

4. 编辑 src/App.vue 文件，将 NameForm.vue 组件添加到模板中:

<template>
  <div id="app">
    <name-form></name-form>
  </div>
</template>
 
<script>
import NameForm from './components/NameForm.vue';
 
export default {
  components: {
    NameForm
  }
};
</script>

5. 运行你的应用:

npm run serve

这个简单的例子展示了如何在Vue中使用Element UI创建一个表单并处理提交。你可以根据具体的学校综合评估系统的需求，扩展这个表单和提交逻辑。

在Vue 2项目中，可以通过全局方法Message来实现Element UI的message组件只出现一次：

import { Message } from 'element-ui';
 
// 自定义消息提示函数，确保只提示一次
function messageOnce(message, type) {
  const msgBox = Message.get(); // 获取当前所有message的实例
  let found = false;
  msgBox.forEach(vnode => {
    if (vnode.componentInstance.message === message) {
      found = true;
    }
  });
  if (!found) {
    Message({
      message,
      type,
    });
  }
}
 
// 使用
messageOnce('这是一条只出现一次的信息', 'success');

在Vue 3项目中，Element Plus的ElMessage服务已经是全局的，可以直接使用，但需要自定义一个函数来确保只提示一次：

import { ElMessage } from 'element-plus';
 
// 自定义消息提示函数，确保只提示一次
function messageOnce(message, type) {
  const msgBox = ElMessage.getContainer(); // 获取消息容器
  if (!msgBox.innerText.includes(message)) {
    ElMessage({
      message,
      type,
    });
  }
}
 
// 使用
messageOnce('这是一条只出现一次的信息', 'success');

请注意，上述代码中的message和type参数需要根据Element UI或Element Plus的Message组件的API进行相应的调整。

在Vue项目中使用ElementUI，首先需要安装ElementUI：

npm install element-ui --save

然后在Vue项目中引入和使用ElementUI：

1. 完整引入（在main.js或app.js中）：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

2. 按需引入（使用babel-plugin-component）：

首先安装babel-plugin-component：

npm install babel-plugin-component -D

然后配置.babelrc文件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在main.js或app.js中按需引入ElementUI组件：

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
 
Vue.use(Button)
Vue.use(Select)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

在Vue组件中使用ElementUI组件：

<template>
  <div>
    <el-button type="primary">点击我</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
    }
  }
}
</script>

以上是在Vue项目中引入和使用ElementUI的基本步骤。

在Element UI中，使用<el-drawer>组件时，若要实现从下到上方向的抽屉，并且在打开时向上拉伸的效果，可以通过设置<el-drawer>的direction属性为ttb（从上到下），然后通过CSS来实现从下到上的视觉效果，并且在打开时通过CSS动画来实现向上拉伸的效果。

以下是实现这种效果的示例代码：

<template>
  <div>
    <el-button @click="drawer = true">打开抽屉</el-button>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false"
      size="100%"
    >
      <div class="drawer-content">
        <!-- 抽屉内容 -->
      </div>
    </el-drawer>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      drawer: false,
      direction: 'ttb' // 从上到下方向
    };
  }
};
</script>
 
<style>
/* 使用CSS实现从下到上的视觉效果 */
.el-drawer__container.ttb {
  display: flex;
  flex-direction: column-reverse;
}
.el-drawer__wrapper.ttb {
  height: 100%;
  overflow: hidden;
}
.el-drawer__body.ttb {
  display: flex;
  flex-direction: column-reverse;
}
 
/* 抽屉打开时的动画效果 */
.el-drawer__container.ttb .el-drawer {
  transition: transform 0.3s;
}
.el-drawer__container.ttb .el-drawer.open {
  transform: translateY(100%) translateZ(0);
}
.el-drawer__container.ttb .el-drawer.open .el-drawer__body {
  flex-direction: column;
}
.el-drawer__container.ttb .el-drawer.draft {
  transform: translateY(0) translateZ(0);
}
</style>

在这个示例中，我们设置了direction属性为ttb，这样抽屉就会从底部向上打开。然后通过CSS样式，我们将抽屉内容的布局反转，并为打开和关闭状态添加了动画效果。这样就实现了从下到上方向，并且在打开时向上拉伸的抽屉效果。