背景
- 背景: 一个table表格,每一行都有 分配角色和修改用户信息的功能
点击对应按钮弹出如下不同的对话框- 问题:对话框中的内容不同—— 是如何通过scope.row 传值渲染的
分配角色
- 直接渲染:传的是scope.row,showdialog函数里面 赋值给data中的user(这一行的数据而非一个ID),
在dialog中直接使用
<!-- 分配角色按钮 -->
<el-button type="warning" @click="showSetRolesDialog(scope.row)"></el-button>
修改角色信息
这个是需要进行双向绑定,所以需要在data里面定义
<el-button type="primary" @click="showEditDialog(scope.row.id)"></el-button>
// 展示编辑用于的对话框
async showEditDialog(id) {
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户数据失败~')
}
this.editForm = res.data
console.log(res)
this.editDialogVisble = true
return this.$message.success('查询用户数据成功~')
}
// 查询用户的对象
editForm: {}
修改用户信息对话框dialog
<el-dialog title="修改用户" @close="aditClosed" :visible.sync="editDialogVisble" width="50%">
<el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
问题:为什么这个一定要传入Id值进行用户信息的提取,如果像上边那样直接把scope.row传进来可以吗
ps: 跟上边分配权限的是同一部分的两个按钮,相同点是都需要获取这一行的数据(上边的是直接获取数据 进行渲染就可以了,but 这个是需要进行双向绑定,所以需要在data里面定义的交互操作,)
- 通过作用域插层 传入用户 ID,
- 通过Id获取用户信息(用户信息存储的data中)