首页 > 其他分享 >elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由

elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由

时间:2023-01-10 14:02:37浏览次数:32  
标签:表格 elementui 单元格 表头 点击 参数 跳转

对于element表格做点击跳转的功能有两大类:1,表头的点击跳转2,表格内容单元格进行点击跳转

是因为该表格只有tabs标签也第二个选项被选中的时候才能让他起效果,所以先做判断,第二个tabs标签被选中的时候实现该功能

1,tabs标签做判断

this.saveTableName1是第二个tabs标签被选中的名称

 

2,表头的点击事件-带参数跳转

column代码
 <el-table-column
              v-for="(item, index) in fieldTableColumnList1"
              :prop="item.fieldName"
              :key="index"
              :minWidth="item.width || '200'"
              v-if="item.needHide === '0' || item.needHide === null"
            >
              <template slot="header" slot-scope="scope">
                <el-link type="primary" @click="handleDetail(scope.column)" :underline="false">
                  {{ item.fieldName === 'title' ? '' : item.fieldName }}
                </el-link>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row.selectFlag && !item.pk">
                  <el-input v-model="scope.row[item.fieldName]"></el-input>
                </div>
                <div v-else>
                  {{ scope.row[item.fieldName] }}
                </div>
              </template>
            </el-table-column>

触发点击事件--带参数跳转路由

跳转完成后-在新的页面(组件)接受参数

 

表头的跳转完成,数据拿到了,存储在本地,调接口的时候params或别的方式发送请求给后台就可以。

3,表格内容-单元格点击带参数跳转

遍历筛选-按条件修改颜色:单元格值为0的时候修改颜色或 背景色

表格单元格点击带参数跳转

在跳转后新的页面接受参数

 

4,返回上一级

在新的页面有个返回上一级按钮

 

标签:表格,elementui,单元格,表头,点击,参数,跳转
From: https://www.cnblogs.com/mahmud/p/17040109.html

相关文章

  • echarts点击柱状图带参数跳转到指定页面(路由)
    echarts点击柱状图带参数跳转到指定页面(路由)项目开发者常用echarts来实现数据可视化功能。上次遇到了一个问题,就是通过后台返回的数据渲染echarts数据完成后需要点击柱形......
  • elementUI el-card的头部样式在scoped下作用无效
    <stylescoped>.el-card/deep/.el-card__body{padding:6px;}.el-card/deep/.el-card__header{padding:8px20px;border-bottom:1pxsolid......
  • ElementUI 全局设置组件的原生默认属性
    propsimportElementUIfrom'element-ui'Element.Input.props.clearable.default=true;原生属性通常情况下,以maxlength属性为例importElementUIfrom'element......
  • 从webview跳转到小程序报错,'wx' is not defined
    项目有一个需求是从h5中跳转回小程序里,在小程序内报了这个错误'wx'isnotdefined尝试了下面两种方法都没有用npminstallweixin-js-sdk,使用这个包没有效果<scr......
  • 如何使点击ElementUI collapse 上的组件时不响应折叠/展开
    背景element-ui上的折叠组件(collapse)有的时候我们需要为组件进行不同的布局来达到我们项目的需要,比如我想要在折叠面板标题的右侧添加一个“审核”的按钮,当这个折叠面板处......
  • Vue 跳转页面传参
    初创建于:2022-07-0811:03要在vue中跳转页面时传递参数,首先需要引入useRoute与useRouter:import{useRouter,useRoute}from'vue-router';constroute=use......
  • vue+elementUI 实现内容区域高度自适应
    //defaultHeight是绑定的属性<el-main:style="defaultHeight"><router-view/></el-main>//注意:这里的defaultHeight必须是对象,不懂的可以去官网看下apidata(){......
  • Python语言——实现登陆界面的跳转
    Python语言——实现登陆界面的跳转importtkinter'''实现登陆界面的跳转'''defenter():root=tkinter.Tk()root.title('信息界面')root['width']=......
  • 14.ElementUI
    ElementUI视频教程(P149~P153)Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页组件:组成网页的部件,例如超链接、按钮、图片、表格等......
  • vue相同路由跳转,数据不刷新问题
    问题的出现    vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会......