vue中，el-table表格中点击详情按钮，获取当前行数据并进行跳转 & this.$router.push跳转页面和this.$route.params获取数据

页面

table.vue

  <template>
    <el-button size="small" type="primary" @click="add">创建检查</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showCheck(scope.row,'Details')">详情</el-button>
          <el-button type="text" size="small" @click="deleted(scope.row)" v-if="scope.row.execStatus != '1'">删除</el-button>
          <el-button type="text" size="small" @click="showCheck(scope.row,'State')" v-if="scope.row.execStatus != '2'">查看状态</el-button>
        </template>
      </el-table-column>       
    </el-table>
  </template>

  <script>
//export const checkDelete = param => { return post('dcp-manage/dcp/compile/check/process/delete', param); }
    import { checkDelete } from "@/api/request";
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods: {
        // 创建检查
        add () {
          this.$router.push('checkServiceAdd')
        },
        /**
         * 当前行详情
         * @param {object} row  选中的当前行数据
         */
        showCheck (row, name) {
          console.log(row); // 获取当前行数据
          this.$router.push({  // 跳转到详情页
            name: name,
            params: {
              ...row
            }
          })
        },
        /**
         * 删除列表数据
         * @param {object} row  选中的当前行数据
         */
        deleted (row) {
          this.$confirm(`您确定要删除该检查任务吗？任务名称：${row.checkServiceName}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            checkDelete(
              {checkServiceId: row.checkServiceId}
            ).then(res => {
              this.$message.success('删除成功!')
              this.getList()
            }).err(err => {
              this.$message.error('删除失败!');
            })
          })
        },          
      }
    }
  </script>

路由文件

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/home'
import Table from '@/views/table'
import Details from '@/views/details'
import CheckServiceAdd from '@/views/details'
Vue.use(VueRouter)

    //    {
    //        name: 'checkServiceAdd',//创建检查
    //        path: '/console/checkServiceAdd',
    //        component: () => import('@/views/compileService/checkService/checkServiceAdd.vue')
    //    },

const routes = [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/table',
      name: 'Table',
      component: Table
    },
    {
      path: '/checkServiceAdd',
      name: 'checkServiceAdd',
      component: CheckServiceAdd
    },
    {
      path: '/details',
      name: 'Details',
      component: Details
    }]

const router = new VueRouter({
  routes
})
export default router

details.vue

<template>
  <div>
     <el-form :model="form" class="form" ref="ruleForm" label-width="180px">
      <el-form-item label="名称：">
        <span>{{form.name}}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="backToList">取消</el-button>
      </el-form-item>
     </el-form>
  </div>
</template>
<script>
export default {
  data () {
     let rowData = this.$route.params
     console.log('rowData',rowData);  //当前行数据
     return {
       form: rowData
    }
  },
  methods: {
    onSubmit () {},
    backToList () {
      this.$router.back(); //返回表格页
    }
  }
}
</script>

当前行数据