vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
先看如下交互效果。
这是一个订单审核页面,通过勾选CheckBox列的checkbox选中某些行后,点击操作区“批量审核”按钮弹出审核窗口,在弹窗里审核完成,即点击“通过”或“拒绝”后,关闭弹窗,刷新订单审核页面,同时,取消此前选中的checkBox。
接下来说实现方式。
如下是页面结构。父窗体是TransactionReview.vue,弹框窗体是Review.vue。
TransactionReview.vue中<a-table>中定义属性事件:rowSelection="rowSelection",每行行首显示CheckBox,这让用户可以进行勾选。
同时,页面有对Review.vue的声明:<review ref="reviewForm" @ok="modalFormOk1"></review>。
这样,通过点击“批量审核”按钮弹出子窗体(Review.vue)。
Review.vue页面中定义了弹框下面的2个按钮:通过 和 拒绝。并为两个按钮定义了click事件,都去调用editRiskViewRefuses(status)函数。
editRiskViewRefuses(status)函数去向服务端发起异步post请求,处理完成后通过$emit关闭弹窗并执行父窗体的@ok事件。
@ok定义在TransactionReview.vue的<review ref="reviewForm" @ok="modalFormOk1"></review>中。执行的事件函数是modalFormOk1,这个函数实现了页面数据的重新加载,并清除列表里的CheckBox选择。
这个项目的vue框架用的是Jeecg-Vue(jeecg是流行的前后端分离框架,后端是Jeecg-boot)。复选框的change事件onSelectChange、清空所有复选框的事件onClearSelected,均在页面依赖的JeecgListMixin.js中定义。
TransactionReview.vue (部分)
<a-button type="primary" @click="batchReview()" icon="reload" style="margin-left: 8px">批量审核</a-button> <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项 <a style="margin-left: 24px" @click="onClearSelected">清空</a> </div> <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :scroll="{ x: 2800, y: 500 }" :rowSelection="rowSelection" @change="handleTableChange"> </a-table> <review ref="reviewForm" @ok="modalFormOk1"></review> computed: { rowSelection() { const {selectedRowKeys} = this; return { selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys; this.ids = selectedRowKeys; //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, getCheckboxProps: record => { console.log(record) return { props: { disabled: record.reviewState === 'pass' || record.reviewState === 'refuse' // Column configuration not to be checked }, } } }; } }, methods: { modalFormOk1(){ this.loadData(); this.onClearSelected(); }, batchReview(){ this.$refs.reviewForm.reviews(this.ids); // this.onClearSelected(); }, },
Review.vue (部分)
// template -> a-modal -> template 定义页底的2个按钮 <template slot="footer"> <a-button type="primary" @click="editRiskViewRefuses('pass')">通过</a-button> <a-button type="primary" @click="editRiskViewRefuses('refuse')">拒绝</a-button> </template> export default { name: "review", //name指定Review.vue的name。 data () { return { title:"审核", visible: false, productCode:'', model: {}, products:'', dataSource:[], loading: false, validatorRules:{ }, labelCol: { xs: { span: 24 }, sm: { span: 5 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, confirmLoading: false, form: this.$form.createForm(this), validatorRules:{ reviewReason:{rules: [{ required: true, message: '审核原因不能为空' }]} }, } }, methods: { editRiskViewRefuses(status){ this.form.validateFields((err, values) => { if (!err) { postAction('/riskOrderReview/reviewBatch',{'ids': this.model.ids.toString(),'reviewReason': values.reviewReason,'reviewState':status}).then((res)=>{ if(res.success){ this.$message.success(res.message); this.$emit('ok'); }else{ this.$message.warning(res.message); } }).finally(() => { this.confirmLoading = false; this.close(); }) } }) }, }
相关文章
- vue组件——富文本编辑器
- Vue之初体验
- Vue数据可视化组件:data-view
- vue 强制清除浏览器缓存
- vue中 关于$emit的用法
- vue 键盘事件keyup/keydoen
- vue数据双向绑定原理-complie
- vue钩子函数
- Vue响应式依赖收集原理分析-vue高级必备
- Vue 图片预加载
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- ASP.NET MVC4开发指南_vue mvc
- Vue 快速入门(二)
- 基于Vue+SSM+SpringCloudAliababa的员工管理系统
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue应用中部署Redis(vue中使用redis)