<el-table :data="tableData" style="width: 100%">
//---:data="用于存放請求數(shù)據(jù)回來的數(shù)組"
<el-table-column label="索引值" width="400">
<template slot-scope="scope">//--- 這里取到當(dāng)前單元格
<span>{{ scope.$index }}</span>//--- scope.$index就是索引
</template>
</el-table-column>
<el-table-column label="標(biāo)題" width="350">
<template slot-scope="scope">//--- 這里取到當(dāng)前單元格
<span>{{ scope.row.title }}</span>
//--- scope.row 直接取到該單元格對象,就是數(shù)組里的元素對象俯树,即是tableData[scope.$index]
//---.title 是對象里面的title屬性的值
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">//--- 這里取到當(dāng)前單元格
<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>
//---這里的點(diǎn)擊事件已經(jīng)不是在根元素上了酬荞,因?yàn)槎嗵琢藥讓咏Y(jié)構(gòu)。
//---這里的點(diǎn)擊事件如果沒有加上 .native 則點(diǎn)擊無效橘忱!
//---這里的點(diǎn)擊事件要加上 .native 表示監(jiān)聽組件根元素的原生事件顷扩。
//---這里的點(diǎn)擊事件不需要 .prevent 也可以實(shí)現(xiàn)相同效果
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<script>
data() {
return {
tableData: [{title:123,age:11},{title:456,age:18}]
//---為了效果先給值火邓,一般情況下為空,其實(shí)際值是后臺接口請求回來的
}
},
methods:{
handleDelete(index, row) {
this.tableData.splice(index+1, 1);//---前端刪除index要+1 !!!!!!!
//---下面是后端數(shù)據(jù)刪除烂叔,可以不看
axios.post(config.newsDelete,//---后端數(shù)據(jù)刪除
{
id: row.id//---傳入被刪除的對象的id值
},
{
headers: {
Authorization: "Bearer " + sessionStorage.getItem("token")//---請求頭驗(yàn)證
}
}
)
.then(res => {
this.rendering()//---刪除了重新渲染
});
}
}
</script>
slot-scope="scope"
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門恬汁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人辜伟,你說我怎么就攤上這事氓侧。” “怎么了导狡?”我有些...
- 文/不壞的土叔 我叫張陵约巷,是天一觀的道長。 經(jīng)常有香客問我旱捧,道長独郎,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任枚赡,我火速辦了婚禮氓癌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘贫橙。我一直安慰自己贪婉,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布卢肃。 她就那樣靜靜地躺著疲迂,像睡著了一般才顿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尤蒿,一...
- 文/蒼蘭香墨 我猛地睜開眼匕争,長吁一口氣:“原來是場噩夢啊……” “哼避乏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起甘桑,我...
- 序言:老撾萬榮一對情侶失蹤拍皮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后跑杭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铆帽,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年德谅,在試婚紗的時候發(fā)現(xiàn)自己被綠了爹橱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布,位于F島的核電站掏颊,受9級特大地震影響糟红,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜乌叶,卻給世界環(huán)境...
- 文/蒙蒙 一盆偿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧枉昏,春花似錦陈肛、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽阳藻。三九已至,卻和暖如春谈撒,著一層夾襖步出監(jiān)牢的瞬間腥泥,已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓溯乒,卻偏偏與公主長得像夹厌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子裆悄,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 1.key key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes...
- 1. 實(shí)例效果: 2. 實(shí)例運(yùn)用到的組件: 這里的實(shí)例 運(yùn)用 element 的 表格組件:el-table 下拉...
- 官方文檔 即插槽播演,插槽定義在子組件內(nèi)冀瓦,是組件的一塊HTML模板,可以在子組件內(nèi)設(shè)置默認(rèn)值写烤,也可以在父組件內(nèi)定義插槽...
- 插槽:也就是slot翼闽,是組件的一塊HTML模板,這塊模板顯示不顯示洲炊、以及怎樣顯示由父組件來決定感局。slot最核心的兩...
- 是金子總會發(fā)光 是銀子總會被發(fā)現(xiàn) 而你我如同石頭沒有被發(fā)現(xiàn)更不會發(fā)光。埋藏地下暂衡。丟在河邊询微。凡夫俗子咋能看破。殊不知...