Vue常见页面（管理+详情+编辑+新增）二、初始化页面数据+如何获取table某一行的数据+不带参数跳转页面+带参数跳转页面+通过router-link跳转页面+table中的操作列如何根据不同的状态

背景

进入页面会首先请求两个接口，一个返回测试单的记录集，一个返回测试单状态的枚举，现在我们需要根据每一条测试单的状态，去展示不同的操作

初始化页面数据

例如我们现在就要将上面的两个接口的数据渲染到页面上，我们如何在加载页面的时候就请求两个接口并返回数据供页面渲染呢，这就要涉及到vue的生命周期了，有兴趣的自己查一下，我们这边只要用到了一个mounted生命周期就行，这个mounted里的方法，就会在进入页面的时候就执行。

<script>  import {    getApplicationSheet,    queryAapplicationListApi  } from '@/api/testsheet'export default {    async mounted(){      await this.getApplicationSheetOne(),      await this.queryAapplicationList()    }, data() {      return { tableData: [], options: [], queryParam:{   pageNo:1,   pageSize:10,   test_name: "",   status_yn: "",   reviewer: "" }}    },    methods: {      //查询测试单状态枚举      async getApplicationSheetOne(){ getApplicationSheet().then(response =>{   this.options = response.result })      },      //查询测试单列表      async queryAapplicationList(){ console.log(this.queryParam), queryAapplicationListApi(this.queryParam).then(response=>{   this.tableData=response.result.list   console.log(this.tableData) })      }    },  }</script>

1、首先引入调用的方法，里面封装了url，你也可以不封装，直接在本页面使用，都可以。
2、引入之后，在methods里定义方法，我习惯初始化时调用几个接口就定义几个方法，前面加上async关键字，这个不懂的话，可以百度一下哈。
3、在data里提前定义好查询用参数的值，这个值就需要看你调用的后端接口的定义了
4、然后在data里提前定义好返回参数的格式，比如说我这，options用来接收状态枚举，tableData用来接受测试单，格式都是list，这也是根据后端接口返回的类型来定义的
5、在方法中为options和tableData通过接口返回赋值
6、在mounted前也加上async，然后里面await this.methods里定义的方法，相当于在create里调用了methods里的方法

如何获取table中一行中的数据 scope.row

我们看到table中的每一行都有对应的操作，那我们如何获取这一行的数据呢，通过
scope.row来获取

      <template slot-scope="scope"> <el-button @click="sheetdetail(scope.row.test_name)" type="text" size="small">查看</el-button> <el-button @click="sheetupdate(scope.row.test_name)" type="text" size="small">编辑</el-button>      </template>

拿到了这些数据我们就可以根据传入的参数去执行方法，比如说我们要根据查看按钮跳转到详情页面，那我们是不是要带着条件去呢，例如我这个页面，我有一个通过测试单名称去查询某一条测试单的接口，那我跳转到详情页，就需要带着这个测试单名称，否则我没有办法去查询这一条记录的详情，可能有人会说，在现在这一页不就有着一条记录的所有的信息呢，直接带过去啊，但是一条数据那么多参数，你全带过去，对前端的压力太大了，不如到了详情页面再查询一下接口。

不带参数跳转页面

在解决带参数跳转之前，我们先解决不带参数跳转的，例如我们的新增按钮，直接跳转到新增页面，不需要任何信息带入

      <el-form-item>   <el-button type="primary" @click="sheetInsert">新建</el-button></el-form-item>

我们首先为按钮配一个点击事件，绑定到了sheetInsert方法上

      //跳转到新增页面      sheetInsert(){   this.$router.push('/testsheet/insert')      }

然后通过this.$router.push跳转到另一个页面，这里面的路径，从父级目录开始就可以，比如说我的项目的router/index.js是这样的
manage就是背景中的页面，insert就是新增页面

  {    path: '/testsheet',    component: Layout,    redirect: '/testsheet/testSheetManage',    name: 'testsheet',    meta: { title: '测试单管理', icon: 'el-icon-s-help' },    children: [      { path: 'testSheetManage', name: 'testSheetManage', component: () => import('@/views/testsheet/testSheetManage'), meta: { title: '测试单管理', icon: 'table' }      },{ name:'testSheetInsert', path:'insert', component: () => import('@/views/testsheet/testSheetInsert')      },{ name:'testSheetDetail', path:'detail/', component: () => import('@/views/testsheet/testSheetDetail')      },{ name:'testSheetUpdate', path:'update/', component: () => import('@/views/testsheet/testSheetUpdate')      },{ name:'testSheetReview', path:'review/', component: () => import('@/views/testsheet/testSheetReview')      }    ]  }

带参数跳转页面

然后我们来讲带参数的怎么办，带的参数已经通过scope.row获取到了这一条记录的test_name，那我们接下来通过将这个参数加到链接的query上来解决这个问题,在methods里的方法我们这样定义，e就是我们传进来的scope.row.test_name，还是通过this.$router.push来将页面切换，但不同的是，这次我们除了path参数还有一个query参数，这个query里就带一个name参数，这个name也可以定义成其他名字，随便，只要将name赋值成e，也就是scope.row.test_name就可以

      //跳转到详情页面      sheetdetail(e) {   console.log(e)   this.$router.push({     path:'/testsheet/detail',     query:{name:e     }   })      }

我们来看一下效果

现在我们参数传过去了，那我们如何取出来呢
1、首先我们在data里定义我们查询接口时用的参数，这里就需要用到被传过来的参数,通过this.$route.query.name就将url中的param里的name的值取过来了，记住这里是route，不是router

  queryTestSheet:{   pageNo:1,   pageSize:10,   test_name: this.$route.query.name,   status_yn: "",   reviewer: ""  }

通过router-link跳转页面

  <el-form-item><router-link  :to="{name:'testSheetReview'}" >需要我review的</router-link>  </el-form-item>

table中的操作列如何根据不同的状态

table中每一行的数据，根据不同的status_yn来展示不同的操作，通过v-if、v-else条件渲染

      <template slot-scope="scope"> <el-button @click="sheetdetail(scope.row.test_name)" type="text" size="small"      v-if="scope.row.status_yn === '已申请'">查看</el-button> <el-button @click="sheetupdate(scope.row.test_name)" type="text" size="small"      v-else>编辑</el-button>      </template>