Vue學習Day09-關於scope.row

關於slot.row沒有完全理解,暫且先挖個坑,后面學習明白了再補充一下.

<el-table :data="userList" stripe style="width: 100%">
      <el-table-column prop="username"label="姓名" width="180"></el-table-column>
      <el-table-column prop="email" label="郵箱" width="180"> </el-table-column>
      <el-table-column prop="mobile" label="電話"> </el-table-column>
      <el-table-column label="用戶狀態">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="userstateChange(scope.row.id, scope.row.mg_state)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="adress" label="操作"> </el-table-column>
</el-table>

1.------------->   :data="userList"

表格綁定了用於存儲數據的數組,里面每一個元素都是數據對象

2.------------->   slot-scope="scope"

這是作用域插槽中定義一個對象(這里對象被定義為scope)來存儲插槽上綁定的數據的用法

3.------------->   scope.row

在這里使用ElementUI表格模板渲染數據時,

"當前行數據的獲取也會用到插槽,scope相當於一行的數據， scope.row相當於當前行的數據對象,"(這是在網上看到的一個解釋,暫且記下)