Element UI 中scope用法

一個固定用法： <template slot-scope="scope">

我們主要說一下這個scope是個什么東西，scope就相當於是tableData的一行，與el-table-column唯一對應，具體試驗代碼如下，

     <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope)" type="text" size="small">編輯</el-button>
          <el-button type="text" size="small" @click="del(scope.$index)">刪除</el-button>
        </template>
      </el-table-column>

js方法 console.log(scope)  通過在控制台觀察，發現每一行輸出的scope都是當前行的數據，包含$index:當前行的索引，column，row，store等，如下：

{row: {…}, column: {…}, $index: 0, store: TableStore, _self: VueComponent}
$index: 0
column: {…}
row: {…}
store: TableStore {__ob__: Observer}
_self: VueComponent {_uid: 486, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
__proto__: Object