2023.2.3 渲染三级数据初始化页面时导致的报错问题/el-table相关的使用问题/router和route的使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_65846728/article/details/128872864

文章讲述了在Vue中处理渲染三级数据时遇到的报错问题，强调了数据未返回时应预先处理。同时，讨论了el-table的使用，包括修改样式、添加排序方法以及如何通过插槽自定义内容。此外，还涉及了router和route的配置及数据传递方法。

摘要由CSDN通过智能技术生成

1.渲染三级数据初始化页面时导致的报错问题

详见(9条消息) vue踩坑记——渲染三级数据初始化页面时导致的报错问题_lixiaonaaa的博客-CSDN博客

跟他相同问题，第三级数据访问不到，主要是数据还没有返回

先把处理好放到二级目录再传

2.el-table相关的使用问题

:header-cell-style修改头行样式

:cell-style修改行样式

:row-style修改单独一行的样式

:sort-method添加排序方法

<el-table :data="info"
                 border
                 style="width: 100%" height="250px"
                 :default-sort="{prop: 'acutTime',order:'descending'}"
                 :header-cell-style="{'text-align':'center'}"
                 :cell-style="{'text-align':'center'}"
                 :row-style = "firstRowClass">
         <el-table-column type="index" :index="changeIndex" label="出价次数"  width="130px" />
         <el-table-column prop="biddingCode" label="竞买代码" width="403px" />
         <el-table-column prop="acutUserName" label="竞买人" width="200px"/>
         <el-table-column prop="acutPrice" label="出价金额" width="200px" />
         <el-table-column prop="acutTime" label="出价时间" width="200px"  :sort-method="sortByAcutTime"/>
         <el-table-column prop="status"  label="状态" width="402px" >
         </el-table-column>
       </el-table>

//把第一行文字改成红色
firstRowClass(row) {
      if (row.rowIndex === 0) {
        return `color: red;`
      }
    }

//根据时间戳排序
   sortByAcutTime(a,b) {
      let aTime = new Date(a.acutTime).getTime()
      let bTime= new Date(b.acutTime).getTime()
       return aTime - bTime
    }

想修改单独一列的内容，然后看到说可以用插槽

使用slot-scope="scope"不太行，查了一堆感觉还是不太行，就放弃了。

还是在父组件mounted获得数据的时候把数据先处理好再传过来

<template slot-scope="scope">{{scope.row.gender}}</template>//我不能用！

3router和route的使用

路由的js文件的配置

{
          path:'/detailA/:id',
          name:'detailA',
          component: () => import("../views/detail.vue"),
        }

跳转的方法，并且传入id

goDetail() {
        this.$router.push({path:`detailA/${this.id}`})
      }

目标页面获得id数据

//获得id
    getId(){
      this.auctionId=this.$route.params.id
    }

跳转的网页格式

detailA/c6ffae78a20740ff85ce80de4c0997f9