vue中如何給el-table-column添加指定列的點擊事件
嗨害嗨，我又來了奧。大家在工作中用組件嗎？elementUI應該都用過吧， element是一套UI組件庫,是由國內餓了么團隊開發(fā)的。它提供了豐富的PC組件,有效地降低了使用者的開發(fā)難度。
如果工作中遇到了表格，我們經常會用el-table組件來寫表格，這樣寫出來的表格樣式更美好?，F(xiàn)在，提出需求，如果表格有某一列具有其對應的詳情頁，點擊這一列的單項，跳轉到其對應的詳情頁，該怎么做？那我們是不是先配一下詳情頁的路由呀，一般在跳轉的時候，都會傳個某某id，作為唯一標識，就知道傳的是哪個了。然后詳情頁的url就是http://xxxxxx?id=1類似的。
那么在這里呢，我就不跳轉了，我講一個方法，獲取這一行所有數(shù)據的辦法。這就要用到我們的作用域插槽了 slot-scope。
首先，把表格的數(shù)據填一下，弄一個表格包含五個人，就是一個數(shù)組長度為5，5個對象(名為people)，然后每個對象包含姓名、年齡、年薪以及住址（純屬虛構，如有雷同純屬巧合）。
data() {
return {
people: [
{
name: "亮亮",
age: 35,
salary: 800000,
address: "亮亮家園",
},
{
name: "華華",
age: 50,
salary: 1800000,
address: "華華家園",
},
{
name: "東東",
age: 37,
salary: 1600000,
address: "東東家園",
},
{
name: "銘銘",
age: 33,
salary: 900000,
address: "銘銘家園",
},
{
name: "小新",
age: 31,
salary: 700000,
address: "小新家園",
},
],
};
},然后在template中的div寫以下代碼（運用到el-table組件）
<el-table :data="people">
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<!-- 注意：這個地方要傳參數(shù)進去才能進行操作 函數(shù)名稱(scope.row) -->
<div @click="alertMessage(scope.row)">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年齡" width="180"></el-table-column>
<el-table-column
prop="salary"
label="年薪/元"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
width="180"
></el-table-column>
</el-table>由于我想點擊人物的名字獲取相應的詳情對象，再彈窗出來。所以用到slot-scope，然后我們可以讀出scope.row，其中就能獲得一個對象，然后包括這行這個人所有的詳細信息（包括姓名，年齡，年薪以及住址），然后可以在methods里邊配置圖中的alertMessage方法，如下圖。
methods: {
alertMessage(row) {
window.alert(
`我叫${row.name}，今年${row.age}歲，年薪${row.salary}元，住在${row.address}`
);
},
},這樣的話，我們就可以打開這個頁面看到如下效果
然后點擊每個名字，會出現(xiàn)彈窗，如下
......等等
這樣的話，我們這個問題就解決了。舉一反三，如果是要跳轉到對應的詳情頁，就得點擊后，獲取scope.row的id屬性，然后通過this.$router.push({path:'...',query:{id:'...'}})，即可跳轉到相應的詳情頁。
學會了嗎？別忘了自己打開電腦寫一寫練一練哦。
到此這篇關于vue中如何給el-table-column添加指定列的點擊事件的文章就介紹到這了,更多相關el-table-column添加點擊事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
由于公司網絡登element-ui官方文檔很慢,想把他載下來離線文檔本地跑,下面這篇文章主要給大家介紹了關于本地部署element-plus文檔的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了Vue組件實現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文將詳細介紹Vue路由管理器Vue-router的使用方法詳解,需要的朋友可以參考下2020-02-02
vue2和el-input無法修改和寫入并且不報錯的解決方案
這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報錯的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了關于vue編譯版本引入的問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue自定義render統(tǒng)一項目組彈框功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了vue拖拽排序插件vuedraggable的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家分享了一款MVVM組件，構建自己的Vue組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在運行Vue項目時遇到npm安裝錯誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項目目錄下運行2024-10-10
這篇文章主要介紹了Vue插槽原理與用法,結合實例形式詳細分析了vue.js插槽內容、具名插槽、作用域插槽等相關原理與使用方法,需要的朋友可以參考下2019-03-03