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

  • 相关阅读:
    python运行出现TypeError: super() takes at least 1 argument (0 given)错误
    python使用Pyinstaller打包
    python 将字符串中的unicode字符码转换成字符
    python 复制列表
    AetherUpload大文件传输
    phpstom激活
    BusyBox telnetd配置
    MDK链接脚本错误
    利用mass storage class 做免驱动usb设备.
    BMP图片的解析,关于压缩方式
  • 原文地址:https://www.cnblogs.com/pwindy/p/14580819.html
Copyright © 2011-2022 走看看