element-UI的slot-scope指令

element-UI的slot-scope指令

在前端项目中，常常见到以下这种写法：

// 表单 form 嵌套在表格 table 的外面，表单 form 必须绑定 rules 和 ref 属性
<el-form :model="form" :rules="rules" ref="form">
   <el-table :data="form.list">
       <el-table-column prop="name" label="姓名">
           <template slot-scope="scope">
  			   // 每个字段动态的绑定表单的[prop][rules]属性
	  		   <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name">
                    <el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable></el-input>
               </el-form-item>
           </template>
       </el-table-column>
  </el-table>
</el-form>

其中，表格的数据为：

// 数据格式必须是"对象嵌套数组"，form 绑定表单，list 绑定表格
form: {
  // 表格数据
  list: [
      { id: 1, name: '小明', age: '22' },
      { id: 2, name: '小红', age: '21' },
      { id: 3, name: '小黄', age: '32' }
  ]
}

在这种表单form嵌套在表格table的写法中，el-form-item的prop属性必须写成这样的：

:prop=“‘list.’ + scope.$index + ‘.name’”

这是 elementui 规定的格式，渲染后的结果为 list.1.name。（索引值取决于当前用的是第几行记录）

关于scope的解释

在template标签中，slot-scope=“scope” 的scope代表一行记录。如果想知道该记录是第几行，则它的索引是scope.$index，如果想知道该行记录的所有值，则从scope.row来获取。换句话说，在同一行的记录中，每一列所用到的scope都是同一个对象。

行记录的更新

如果想对表格里的某一行记录进行更新，比如以下场景：

我希望当点击小红的【长大】按钮时，小红的年龄变为22岁。

具体思路：

为按钮绑定点击事件，即 @click=“ageUp(scope)”

//事件触发
ageUp(scope) {
	scope.row.age = scope.row.age + 1  // 将当前行的 age 值+1
}

如此，当点击小红的【长大】按钮时，小红的年龄变为22岁。

值得注意的是，这种更新得以成功的前提是：scope.row 已有 age 属性。否则，会出现首次点击不更新，第二次点击才更新的情况。（当然了，本场景中age属性已然是存在的）