质量看板开发实践(六):添加一个jira数据列表,并可点击跳转至jira详情
2023-09-11 14:21:25 时间
在编写质量看板时,添加了一个关于当前冲刺的故事卡状态饼图,
在这个基础上,希望能够看到这个冲刺中每个故事卡的标题内容,可以以弹窗列表的形式展示,如下
这里用到element-ui的一个组件:Dialog 对话框
前端定义交互样式
<div style="position: absolute;margin-top: 50%;"> <el-button type="text" @click="dialogTableVisible = true" style="font-size: 15px;">查看故事卡详情</el-button> <el-dialog title="故事卡详情" :visible.sync="dialogTableVisible" width="60%"> <el-table :data="gridData" border style="width: 100%" max-height="400" :default-sort = "{property: 'story_key', order: 'descending'}"> <!--max-height设置表格最大高度,超出显示滚动条--> <el-table-column type="index" width="50" align="center"></el-table-column> <el-table-column property="story_key" sortable label="故事卡key" width="130" align="center"></el-table-column> <el-table-column property="story_name" label="故事卡标题" width="400" align="center"></el-table-column> <el-table-column property="story_status" sortable label="故事卡状态" width="130" align="center"></el-table-column> <el-table-column property="address" label="操作" align="center" fixed="right"> <!--控制这一列的位置--> <template slot-scope="scope"> <el-button @click.native.prevent="view_detail(scope.$index, scope.row.story_key)" type="text" size="small"> 详情 </el-button> </template> </el-table-column> </el-table> </el-dialog> </div>
el-table 标签中的 :data="gridData"
是往列表中渲染的数据
js代码
data() { return { gridData: "", ... ... ... } }, methods: { get_sprint_data(value) { ... ... this.gridData = response.data.story_details ... ... } }
后端需要返回列表所需的数据,包含故事卡id、故事卡标题、故事卡状态
... ... summary = [] for i in issues: # print(i.raw) # 打印每个故事的原始信息 summary.append({"story_key": i.raw["key"], "story_name": i.raw["fields"]["summary"], "story_status": i.raw["fields"]["status"]["name"]}) ... ... res = { ... ... "story_details": summary } return res
数据返回前端后,要在列表后边添加一个操作列,点击按钮可以跳转至jira故事卡详情
前端对应代码如下
<el-table-column property="address" label="操作" align="center" fixed="right"> <!--控制这一列的位置--> <template slot-scope="scope"> <el-button @click.native.prevent="view_detail(scope.$index, scope.row.story_key)" type="text" size="small"> 详情 </el-button> </template> </el-table-column>
操作按钮定义为【详情】,点击【详情】进行跳转
@click.native.prevent
绑定了一个方法view_detail
传入2个参数:列表数据的序号index,列表中的story_key字段(也就是故事卡的id)
js代码
methods: { view_detail(index, row) { console.log(index); window.open("http://xxx.xxx.xxx/browse/"+row) //打开新的浏览器窗口,访问链接 }, ... ... }
OK,列表功能这样就完成了
相关文章
- Python中的列表List
- DataGridView依据下拉列表显示数据
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 图片管理之获取图片列表数据
- python中将嵌套列表展开
- react-window 多条列表数据加载(虚拟滚动)
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- Redis开发运维实践数据操作之列表操作
- IntelliJ IDEA 常用快捷键列表及技巧大全
- Python 高级变量 列表
- 《Python数据科学指南》——1.7 从另一个列表创建列表——列表推导
- android 支持的语言列表(汇总)
- Swift - 列表项尾部附件点击响应(感叹号,箭头等)
- Android开发学习之LauncherActivity开发启动的列表
- 12.散列表
- Excel VLOOKUP实用教程之 03 使用下拉列表作为查找值vlookup?(教程含数据excel)
- python : 将txt文件中的数据读为numpy数组或列表
- 数据持久化基础知识——属性列表
- 采集数据工具推荐,以及采集数据列表详细图解流程
- 浅析虚拟列表高性能渲染大体量数据原理
- Python学习---列表/元组/字典/字符串/set集合/深浅拷贝1207【all】
- scrollIntoView实现简单的锚点定位(示例:选择城市列表)
- Unity UGUI 基础 之 DropDown(下拉列表框) 的简单使用(简单改变样式/动态下来列表的数据添加删除/列表事件监听等)
- 根据列表的值来显示每一个元素出现的次数
- 【C#】访问泛型中的List列表数据
- Msql使用concat函数实现关键字模糊查询(列表数据过滤-附前后端代码)
- bisect——对列表插入新数据仍然保持有序