scope.row的含义及应用

SUNN1Y

于 2023-11-23 13:16:59 发布

阅读量4.6k

点赞数 2

文章标签： vue.js elementui javascript

原文链接：https://www.python100.com/html/9UNTR3Z6U808.html

版权

一、scope.row的概念

在Vue.js的组件中，我们经常会使用到scope.row，其实scope.row代表组件中的一行数据。scope.row通常用于循环表格中的表格行，可以在table或el-table等组件中使用。

在该组件内部，每一行都会生成一个可绑定的对象，该对象就是每一行的数据。scope.row会自动为我们绑定该对象，在组件内部可以通过该对象来获取行的具体数据。

二、scope.row的用法

使用scope.row可以获取到当前行的数据对象，从而再进行对该行数据的一系列操作。

1. 获取当前行数据

<el-table :data="tableData">
  <el-table-column prop="name">
    <template scope="scope">
      {{ scope.row.name }}
    </template>
  </el-table-column>
  <el-table-column>
    <template scope="scope">
      <el-button @click="showRow(scope.row)">查看详情</el-button>
    </template>
  </el-table-column>
</el-table>

在上述代码实例中，我们使用了scope.row.name获取当前行数据中的name属性，并在模板中进行了展示。同时，我们可以通过onClick事件，借助该按钮查看当前行的具体详情。

2. 对当前行数据的修改

<el-table :data="tableData">
  <el-table-column prop="name">
    <template scope="scope">
      <el-input v-model="scope.row.name"></el-input>
    </template>
  </el-table-column>
  <el-table-column>
    <template scope="scope">
      <el-button @click="editRow(scope.row)">保存</el-button>
    </template>
  </el-table-column>
</el-table>

在上述代码实例中，我们使用了一个带有v-model指令的el-input，该指令会自动绑定当前行的name属性。同时，在点击保存按钮时，便可以触发对当前行数据的修改。

3. 对当前行数据的删除

<el-table :data="tableData">
  <el-table-column>
    <template scope="scope">
      <el-button @click="deleteRow(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

在上述代码实例中，我们使用了一个带有onClick事件的el-button，该事件会触发对当前行数据的删除操作。