scope作用域插槽在table中用法

element-ui中slot-scope=“scope”

在table应用中我们经常看到如下用法

 <el-table :data="userlist" style="width: 100%" border >//:data 在此绑定数据源
        <el-table-column type="index" label="编号"></el-table-column>//索引列
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态" prop="mg_state" width="80">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"
                       @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">//scope作用域插槽会覆盖prop，prop可省略
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">//false是布尔值所以用数据绑定
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XvJCP4J4-1583396631623)(C:\Users\18560\AppData\Roaming\Typora\typora-user-images\1583396308173.png)]

通过scope.row.id，我们就可以读取到每一行中的id。

再通过id做相应查询和操作。

.id，我们就可以读取到每一行中的id。

再通过id做相应查询和操作。

算了，还是直接看官方table的讲解吧。