<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>

?

總結

以上是生活随笔為你收集整理的工作总结8：关于Vue中的slot-scope=“scope“的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。