循环使用element-ui中的Popover弹出框
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
应项目需求,需要完成一个表格,表格中有客户操作状态字段,hover上去就会拿到此客户的id,并请求后台拿到状态,显示客户状态到哪步了,效果如下:

代码如下:
<el-table-column label="客户操作进度状态" width="190">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top" width="300" @show="handleStatus(scope)">
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="添加策略"></el-step>
<el-step title="选择策略"></el-step>
<el-step title="申请实盘"></el-step>
<el-step title="审核"></el-step>
<el-step title="启动实盘"></el-step>
</el-steps>
<div slot="reference" class="name-wrapper">
<span
:class="scope.row.status == 0?'red':'blue'"
>{{ scope.row.status==0?'未完成':'已完成' }}</span>
</div>
</el-popover>
</template>
</el-table-column>
关键就是@show这个事件。。。。。。。。。经过这个事件拿到用户id
handleStatus(scope){
console.log(scope.row.userId)
}
最后去请求后台。。。。。可以做很多事情了。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)