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,返回上一级
在新的页面有个返回上一级按钮