当前位置:   article > 正文

跳转路由时传参,elementUI的table表格点击对应行,获取对应行的数据;更改el-table头部样式_el-table修改点击行的样式

el-table修改点击行的样式

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

html部分

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

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

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

@3、跳转路由时传参数

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

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

  1. {
  2. path: 'EditTemplate//:id',
  3. name: 'EditTemplate',
  4. component: EditTemplate
  5. },

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

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

 

可能传多个值的情况

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

其他方式     https://segmentfault.com/a/1190000012393587

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/279797
推荐阅读
相关标签
  

闽ICP备14008679号