關於Vue中的slot-scope="scope"

<template>
  <el-table :data="tableData" style="width: 100%">
    //---:data="用於存放請求數據回來的數組"
    <el-table-column label="索引值" width="400">
      <template slot-scope="scope">
        //--- 這里取到當前單元格
        <span>{{ scope.$index }}</span>//--- scope.$index就是索引
      </template>
    </el-table-column>
    <el-table-column label="標題" width="350">
      <template slot-scope="scope">
        //--- 這里取到當前單元格
        <span>{{ scope.row.title }}</span>
        //--- scope.row 直接取到該單元格對象，就是數組里的元素對象，即是tableData[scope.$index]
        //---.title 是對象里面的title屬性的值
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        //--- 這里取到當前單元格
        <el-dropdown size="medium" split-button type="primary">
          更多
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="handleEdit(scope.$index, scope.row)">
              編輯
            </el-dropdown-item>
            <el-dropdown-item @click.native.prevent="getUp(scope.$index, scope.row)">
              上升
            </el-dropdown-item>
            <el-dropdown-item @click.native.prevent="getDown(scope.$index, scope.row)">
              下降
            </el-dropdown-item>
            <el-dropdown-item @click.native.prevent="handleDelete(scope.$index, scope.row)">
              刪除
            </el-dropdown-item>
            //---這里的點擊事件已經不是在根元素上了，因為多套了幾層結構。
            //---這里的點擊事件如果沒有加上 .native 則點擊無效！
            //---這里的點擊事件要加上 .native 表示監聽組件根元素的原生事件。
            //---這里的點擊事件不需要 .prevent 也可以實現相同效果
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{ title: 123, age: 11 }, { title: 456, age: 18 }]
      // ---為了效果先給值，一般情況下為空，其實際值是后台接口請求回來的
    }
  },
  methods: {
    handleDelete (index, row) {
      this.tableData.splice(index + 1, 1)// ---前端刪除index要+1 !!!!!!!
      // ---下面是后端數據刪除，可以不看
      axios.post(config.newsDelete, // ---后端數據刪除
        {
          id: row.id// ---傳入被刪除的對象的id值
        },
        {
          headers: {
            Authorization: 'Bearer ' + sessionStorage.getItem('token')// ---請求頭驗證
          }
        }
      )
        .then((res) => {
          this.rendering()// ---刪除了重新渲染
        })
    }
  }
}
</script>

<style>

</style>