首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >质量看板开发实践(六):添加一个列表,显示当前冲刺的故事标题

质量看板开发实践(六):添加一个列表,显示当前冲刺的故事标题

原创
作者头像
冰霜
发布于 2022-05-01 11:47:57
发布于 2022-05-01 11:47:57
58710
代码可运行
举报
运行总次数:0
代码可运行

在编写质量看板时,添加了一个关于当前冲刺的故事卡状态饼图,

在这个基础上,希望能够看到这个冲刺中每个故事卡的标题内容,可以以弹窗列表的形式展示,如下

这里用到element-ui的一个组件:Dialog 对话框

前端定义交互样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          <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代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  data() {
    return {
      gridData: "",
      ...
      ...
      ...
    }
  },
  
  methods: {
      get_sprint_data(value) {
          ...
          ...
          this.gridData = response.data.story_details
          ...
          ...
      }
  }
  

后端需要返回列表所需的数据,包含故事卡id、故事卡标题、故事卡状态

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            ...
            ...
            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故事卡详情

前端对应代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                <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代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
methods: {
    view_detail(index, row) {
      console.log(index);
      window.open("http://xxx.xxx.xxx/browse/"+row)  //打开新的浏览器窗口,访问链接
    },
    ...
    ...
 }

OK,列表功能就完成了

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
怎么联系你
怎么联系你
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
微服务项目:尚融宝(42)(核心业务流程:借款额度审批(2))
创建 src/views/core/borrow-info/detail.vue 
一个风轻云淡
2022/11/15
4120
微服务项目:尚融宝(42)(核心业务流程:借款额度审批(2))
vue2.0+Element-ui实战案例
我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭建一个本地的服务,方便对数据的增删改查,
小周sir
2019/09/23
2.5K0
vue2.0+Element-ui实战案例
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》070-商业项目:电商后台管理系统实战(商品管理模块的开发)
在电商平台中,商品管理模块是连接商家与消费者的重要桥梁。它不仅承担着商品信息的录入、修改与删除等基本功能,还涉及到库存管理、价格调整、上下架操作等多项关键任务。一个高效的商品管理模块能够帮助商家轻松管理各种商品,提高销售效率,并确保用户获得准确的信息。
愚公搬代码
2025/06/03
1910
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》070-商业项目:电商后台管理系统实战(商品管理模块的开发)
猿实战08——属性库实现之属性关系绑定
属性和属性值,看上去很不起眼,数据粒度也很小,但是正式因为数据粒度小,灵活多变,组织得当可以强有力的区分千变万化的商品。
山旮旯的胖子
2020/09/05
9200
猿实战08——属性库实现之属性关系绑定
vue3+element-plus 表格table实现树状结构父子级互不影响
用户5899361
2024/01/31
1.2K0
Vue + Flask 实战开发系列(八)
登录和退出功能做完以后,接下来继续开发作者信息相关功能,例如作者列表,添加、删除、更新等功能。开发之前,先要清理一下vue-admin-template模板默认生成的路由信息。之后,我们从作者列表功能开始开发。
TalkPython
2020/07/15
2.2K0
Vue + Flask 实战开发系列(八)
手把手教你实现一个Vue无限级联树形表格(增删改)
平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。
马克社区
2022/05/11
1.7K0
自定义权限功能之角色增删改查及分配路由资源的实现
笔者采用前后端分离项目开发自定义权限功能模块有一段时间了,今天这部分的收尾篇了。在这个系列的文章里笔者后端采用一个开源的springboot项目blog-server,前端采用基于vue和element-ui技术栈的开源项目vue-element-admin先后实现了「根据当前登录用户角色动态加载左侧菜单、用户分页查询和给用户授予角色」等功能的实现。本文则是这个权限功能的扫尾部分,笔者带领大家来继续实现「角色的增删改和给角色分配路由资源」这部分功能,以后有时间的化还会继续补角色-按钮级别的权限控制。为了利于笔者和我的读者朋友往高级开发和架构师方向发展,后面发文的重点将放在redis、rabbitmq、rocketmq和springcloud等分布式技术栈的学习和实践上。
用户3587585
2021/09/29
1.8K0
自定义权限功能之角色增删改查及分配路由资源的实现
手把手教你实现一个Vue无限级联树形表格(增删改)
平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。
Vam的金豆之路
2021/12/01
6370
手把手教你实现一个Vue无限级联树形表格(增删改)
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师
IT司马青衫
2022/08/16
1.3K0
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原
在很多时候,我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。
朝雨忆轻尘
2019/06/19
1.1K0
Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原
二开vue-admin-template-4-curd
腾云先锋(TDP,Tencent Cloud Developer Pioneer)是腾讯云GTS官方组建并运营的技术开发者群体。这里有最专业的开发者&客户,能与产品人员亲密接触,专有的问题&需求反馈渠道,有一群志同道合的兄弟姐妹。来加入属于我们开发者的社群吧!
无敌小菜鸟
2022/04/02
4230
二开vue-admin-template-4-curd
Vue + Element UI 实现权限管理系统 前端篇(十二)
 而具体的Mock接口,把根路径移除,因为在生成Mock的时候会自动把根路径加上去。
朝雨忆轻尘
2019/06/18
1.4K0
TienChin-课程管理-展示课程列表
程序员NEO
2023/10/12
2830
TienChin-课程管理-展示课程列表
vue表格分页以及增删改查的实际应用
效果 1:表格以及分页 2:增加一条数据 3:删除一条数据 4:修改一条数据 5:查询一条数据 实例: <template> <div class="tab-container"> <d
王小婷
2021/03/17
1.9K0
实现表格行的拖拽以及分页
在做一些后台管理系统时,表格的数据信息展示是很常见的需求,而对应的都是一些增删改查的操作
itclanCoder
2021/12/06
3.2K0
实现表格行的拖拽以及分页
从0到1开发测试平台(十五)性能测试用例管理页面的编写
上一讲讲解了测试管理页面对应的后台接口,这一节我们主要讲解测试用例管理页面的编写,先上一张写完之后的效果图
周辰晨
2021/03/19
9110
猿实战13——实现你没听说过的前台类目
上几个章节,猿人君教会了你实现了属性/属性值和后台类目的绑定关系,今天,猿人君就带你来实现前台类目。
山旮旯的胖子
2020/09/23
6990
猿实战13——实现你没听说过的前台类目
vue的修饰符!sync和el-dialog弹窗组件
父组件 index.vue: <template> <info :value="myValue" @valueChanged="e => myValue = e"></info> </template> <script> inport info from './info.vue'; export default { components: { info, }, data() { return {
leader755
2022/03/09
8150
Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现
菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口,查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', method: 'post'
朝雨忆轻尘
2019/06/18
2.1K0
推荐阅读
相关推荐
微服务项目:尚融宝(42)(核心业务流程:借款额度审批(2))
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档