Vue.js 实现表单数据参数传递,以及不同独立按钮之间的参数传递
使用vue.js以及基于vue的element ui框架昨天就纠结了很久的问题:需求是,想要在下面这样的表格中,点击每一行数据最后的操作(审批)按钮,就弹出一个模态框,如图二,点击模态框中的同意或者拒绝按钮,就改变图一表格中的状态,每一行都是独立的数据。所以需要传参数,最开始的思路是,点击审批按钮触发事件,然后再这个事件中监听用户点击了同意还是拒
·
使用vue.js以及基于vue的element ui框架
昨天就纠结了很久的问题:需求是,
想要在下面这样的表格中,
点击每一行数据最后的操作(审批)按钮,就弹出一个模态框,如图二,点击模态框中的同意或者拒绝按钮,就改变图一表格中的状态,每一行都是独立的数据。所以需要传参数,最开始的思路是,点击审批按钮触发事件,然后再这个事件中监听用户点击了同意还是拒绝按钮再来改变状态,试了半天发现行不通,只能换种思维。
修改成审批按钮和同意拒绝按钮都是独立的事件,同时传递当前数据的参数给点击事件,
具体实现方法如下:
这是表格的代码,要注意审批按钮事件带的是当前数据参数
<el-table :data="tableData" style="width: 100%;margin: 10px 0 15px 0;">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="roomName" label="教室名称" min-width="140px"></el-table-column>
<el-table-column prop="roomType" label="教室类别"></el-table-column>
<el-table-column prop="roomPosition" label="教室位置" min-width="120px"></el-table-column>
<el-table-column prop="roomSize" label="可容人数"></el-table-column>
<el-table-column prop="apply" label="申请人"></el-table-column>
<el-table-column prop="useDate" label="使用时间" min-width="210px"></el-table-column>
<el-table-column prop="status" label="状态">
<template scope="scope">
<el-tag :type="scope.row.status === '已审批' ? 'success' : 'warning'" close-transition>{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100px">
<template scope="scope">
<el-button @click="handleApply(scope.$index, scope.row)" type="success" size="small">审批</el-button>
</template>
</el-table-column>
</el-table>
表格的数据结构如下,主要看每一组数据最后的status(状态)
tableData: [{
roomName: '多媒体功能教室',
roomType: '微机',
roomPosition: '博学楼一楼',
roomSize: '300',
apply: '张三',
useDate: '2017-8-2 15:45:44-18:00:00',
status: '未审批'
},
{
roomName: '多媒体功能教室',
roomType: '音乐',
roomPosition: '博学楼一楼',
roomSize: '300',
apply: '张三',
useDate: '2017-8-2 15:45:44-18:00:00',
status: '已审批'
},
{
roomName: 'xxx功能教室',
roomType: '音乐',
roomPosition: '博学楼一楼',
roomSize: '300',
apply: '张三',
useDate: '2017-8-2 15:45:44-18:00:00',
status: '已拒绝'
}
]
点击显示的模态框代码如下:
<el-dialog title="功能教室审批" :visible.sync="applyRoom" modal-append-to-body="false">
<el-form ref="applyRoom" :model="applyRoomForm" label-width="100px">
<el-form-item label="教室名称" prop="roomName" style="width: 93%;">
<el-label v-model="applyRoomForm.roomName">{{applyRoomForm.roomName}}</el-label>
</el-form-item>
...中间的重复字段省略
<el-form-item label="状态" prop="status" style="width: 93%;">
<el-label v-model="applyRoomForm.status">{{applyRoomForm.status}}</el-label>
</el-form-item>
<el-form-item label="审批备注" prop="applyRemarks" style="width: 93%;">
<el-input type="textarea" v-model="applyRoomForm.applyRemarks"></el-input>
</el-form-item>
<el-form-item>
<template scope="scope">
<el-button type="primary" @click="agreeApply(applyRoomForm)" class="agreeBtn actionBtn">同意</el-button>
<el-button type="success" @click="refuseApply(applyRoomForm)" class="refuseBtn actionBtn">拒绝</el-button>
</template>
</el-form-item>
</el-form>
</el-dialog>
模态框的数据结构:
applyRoomForm: []
对应的方法如下:
点击审批按钮显示模态框事件:
//这里使用_this是为了防止出现this指向错误问题,因为在点击审批按钮时已经将这一行数据传递给了这个函数,然后把这一行数据赋值给applyRoomForm,即为模态框中显示的信息。
handleApply: function(index, row) {
var _this = this;
_this.applyRoomForm = row;//将参数信息赋值给applyRoomForm,即为模态框中显示的信息。
_this.applyRoom = true;//显示模态框
},
点击同意按钮的事件:
agreeApply: function(data) {
//data参数是当前行的数据
//有三种状态,已审批,已拒绝,未审批
if(data.status == '未审批') {
this.applyRoom = false;
data.status = '已审批';
this.$notify.success({
title: '成功',
message: '教室审批成功'
});
return
} else if(data.status == '已审批') {
this.$notify.warning({
title: '提示',
message: '该教室审批已通过,不可重复操作'
});
return
} else if(data.status == '已拒绝') {
this.$notify.error({
title: '提示',
message: '该教室审批已拒绝,不可操作'
});
return
}
},
点击拒绝按钮的事件:
refuseApply: function(data) {
//有三种状态,已审批,已拒绝,未审批
if(data.status == '已审批') {
this.$notify.error({
message: '该教室已审批通过,不可操作。'
});
return
} else if(data.status == '未审批') {
data.status = '已拒绝';
this.$notify.warning({
title: '提示',
message: '该教室申请已被拒绝'
});
return
} else if(data.status == '已拒绝') {
this.$notify.warning({
title: '提示',
message: '该教室申请已被拒绝,不可重复操作'
});
return
}
},
这样问题就解决啦,不得不感叹Vue真的很强大。
更多推荐
已为社区贡献1条内容
所有评论(0)