前端实习D18

控制台出现的sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT异常

 在vue.config.js文件中的module.exports中的devServer中加上host: ‘localhost’

Unknown custom element: ＜＞ - did you register the component correctly? For recursive compon 

第一种： 看 components:{},单词是否拼错，和不要写成components(){}
第二种：本页面components 看写了几个， 是否是因为覆盖了。只能有一个components:{}

第三种，检查引入的组件 确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."

第四种： div 的id和 components的name一样 也会报这个错误，也就是页面不要出现相同id的名字

下载/导出文件：

• 拦截器判断是不是blob类型（二进制流），如果是直接返回数据，不再进行解构(src/utils/request.js)

  if (response.data instanceof Blob) return response.data // 返回了Blob对象

• 安装file-saver    npm i file-saver
• 点击按钮调用接口，使用file-saver将blob转化成文件下载-代码位置(src/views/employee/index.vue)

  <el-button size="mini" @click="exportEmployee">excel导出</el-button>
  
   import FileSaver from 'file-saver'
   import { exportEmployee } from '@/api/employee'
  
    async  exportEmployee() {
        const result = await exportEmployee() // 导出所有的员工接口
        // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
        // FileSaver.saveAs(blob对象,文件名称)
        FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
   }

  分页

• 在el-table绑定数据

  <el-table 
  :data="tableData.slice((pageParams.currentPage-1)*pageParams.pageSize,pageParams.currentPage*pageParams.pageSize)" 
  border  
  table-layout='fixed' 
  class="tableAuto"
  style="width:100%">

  组件

    <el-pagination class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParams.currentPage"                
        :page-size="pageParams.pageSize"
        :page-sizes="[5,10,20,30,40,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageParams.total">
    </el-pagination>

data

  pageParams: {
                pageSize: 5, //每页的条数
                total: 0, //总条数
                currentPage: 1, 
            },

在获取数据时 getetDelivertTimeList(){}

this.pageParams.total=this.tableData.length    

handleSizeChange(val) {  //切换每页展示条数
    this.pageParams.pageSize = val;
    console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {  //切换当前页数
    this.pageParams.currentPage= val
    console.log(`当前页: ${val}`);
},    

点击删除后有时不能自动刷新。

删除操作后立即执行刷新操作，而删除操作或响应处理（如UI更新）可能还未完全完成。在这种情况下，确实可以通过使用 setTimeout 来延迟刷新操作。

如果 delHolidayMsg 是一个异步函数，并且它返回了一个Promise，那么你可以直接在这个Promise解决后再进行刷新操作，而不需要额外的 setTimeout。

 delHolidayMsg(row.id).then(() => {  
            this.$message({  
                type: 'success',  
                message: '删除成功!'  
            });  
            this.getHolidayMsgList(); // 在删除成功的Promise解决后调用