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,返回上一级

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章