ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

在写项目时，老师通过向后端发请求获得表格原来的数据来填充修改表单里的数据。
这是表格：
ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作
这是点击修改按钮后显示出来的修改表单：
ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

但本地里都已经有这些数据了，就没必要再发一次请求，徒增服务器压力。

准备

可是该怎么获得当前行的数据填充上去呢？答案在slot-scope="scope"。
slot-scope="scope"本质上就是一个插槽，scope的row属性有着表格一整行的数据。
它还有其他有用的属性，比如$index，这里不多介绍。

步骤

  1. 把原来的修改按钮包裹在<template>标签里，再用scope.row就能轻松获得表格数据了。

  2. 接下来就把scope.row作为参数传递给修改按钮的点击事件的回调函数showEditDialog，在这个函数里把自定义的editForm对象(这个自定义对象里存放修改表单的所有数据，里面的属性跟input框的文本值绑定了）赋值为scope.row。

<template slot-scope="scope">
    <!-- 修改 -->
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
    <!-- 删除 -->
    <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
    <!-- 分配角色 -->
    <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
        <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
    </el-tooltip>
</template>

展示编辑用户的对话框+数据回显：

showEditDialog(editForm) {
    this.editDialogVisible = true
    this.editForm = editForm
},

注意，不能只把用到数据的修改按钮放在<template>里、用不到数据的其他按钮就不放在里面了，这样会导致template外的按钮无法显示。要放就全部放。

标签 , ,

发表回复