zoukankan      html  css  js  c++  java
  • 跳转路由时传参,elementUI的table表格点击对应行,获取对应行的数据;更改el-table头部样式

    需求情景:我要从模板列表页跳转到编辑页,在编辑页面我要获取到对应的id,传给后台,以获取对应的模板详情

    html部分

    @1、这里使用了插槽,当点击对应行的时候,会获取对应行的数据和下标

    @2、:header-cell-style="{color:'#333'}"可以更改头部table的样式

    :header-cell-style="{color:'#333'}"

    @3、跳转路由时传参数

    handleEdit (index,row) {
        // console.log(index);
        // console.log(row.id);
        this.editPageShow = true;
        this.templateId = row.id;
        const id = row.id;
        // console.log(this.templateId);
        this.$router.push({name: "EditTemplate", params: {id}});//此处只传了一个值id
    },

    这个在router定义路由的时候如下

     {
          path: 'EditTemplate//:id',
          name: 'EditTemplate',
          component: EditTemplate
        },

    然后跳转到EditTemplate的组件中时在子组件中接受传过来的参数

    //data中定义
    templateId:'',
     
    mounted(){
       this.templateId = this.$route.params.id; 
    }
    //这样就可以在组建中使用了

    可能传多个值的情况

    //在表格中的写法以及方法和上述一致 要声明的就变成了id name两个
    const id = row.id;
    const name = row.name;
    this.$router.push({name: "AGroupList", params: {id,name}});
    //在router中定义
     {
          path: 'AGroupList//:id/:name',
          name: 'AGroupList',
          component: AGroupList
        }

    参考---https://blog.csdn.net/Sunny_lxm/article/details/89216294

  • 相关阅读:
    668. Kth Smallest Number in Multiplication Table
    658. Find K Closest Elements
    483. Smallest Good Base
    475. Heaters
    454. 4Sum II
    441. Arranging Coins
    436. Find Right Interval
    410. Split Array Largest Sum
    392. Is Subsequence
    378. Kth Smallest Element in a Sorted Matrix
  • 原文地址:https://www.cnblogs.com/pwindy/p/14580819.html
Copyright © 2011-2022 走看看