快捷導(dǎo)航

vue中如何給el-table-column添加指定列的點(diǎn)擊事件

更新時(shí)間：2022年11月16日 09:27:44 作者：程序猿小Lone

elementui中提供了點(diǎn)擊行處理事件,下面這篇文章主要給大家介紹了關(guān)于vue中如何給el-table-column添加指定列的點(diǎn)擊事件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

嗨害嗨，我又來了奧。大家在工作中用組件嗎？elementUI應(yīng)該都用過吧， element是一套UI組件庫,是由國(guó)內(nèi)餓了么團(tuán)隊(duì)開發(fā)的。它提供了豐富的PC組件,有效地降低了使用者的開發(fā)難度。

如果工作中遇到了表格，我們經(jīng)常會(huì)用el-table組件來寫表格，這樣寫出來的表格樣式更美好?，F(xiàn)在，提出需求，如果表格有某一列具有其對(duì)應(yīng)的詳情頁，點(diǎn)擊這一列的單項(xiàng)，跳轉(zhuǎn)到其對(duì)應(yīng)的詳情頁，該怎么做？那我們是不是先配一下詳情頁的路由呀，一般在跳轉(zhuǎn)的時(shí)候，都會(huì)傳個(gè)某某id，作為唯一標(biāo)識(shí)，就知道傳的是哪個(gè)了。然后詳情頁的url就是http://xxxxxx?id=1類似的。

那么在這里呢，我就不跳轉(zhuǎn)了，我講一個(gè)方法，獲取這一行所有數(shù)據(jù)的辦法。這就要用到我們的作用域插槽了 slot-scope。

首先，把表格的數(shù)據(jù)填一下，弄一個(gè)表格包含五個(gè)人，就是一個(gè)數(shù)組長(zhǎng)度為5，5個(gè)對(duì)象(名為people)，然后每個(gè)對(duì)象包含姓名、年齡、年薪以及住址（純屬虛構(gòu)，如有雷同純屬巧合）。

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寫以下代碼（運(yùn)用到el-table組件）

    <el-table :data="people">
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <!-- 注意：這個(gè)地方要傳參數(shù)進(jìn)去才能進(jìn)行操作  函數(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>

由于我想點(diǎn)擊人物的名字獲取相應(yīng)的詳情對(duì)象，再?gòu)棿俺鰜?。所以用到slot-scope，然后我們可以讀出scope.row，其中就能獲得一個(gè)對(duì)象，然后包括這行這個(gè)人所有的詳細(xì)信息（包括姓名，年齡，年薪以及住址），然后可以在methods里邊配置圖中的alertMessage方法，如下圖。

  methods: {
    alertMessage(row) {
      window.alert(
        `我叫${row.name}，今年${row.age}歲，年薪${row.salary}元，住在${row.address}`
      );
    },
  },

這樣的話，我們就可以打開這個(gè)頁面看到如下效果

然后點(diǎn)擊每個(gè)名字，會(huì)出現(xiàn)彈窗，如下

......等等

這樣的話，我們這個(gè)問題就解決了。舉一反三，如果是要跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁，就得點(diǎn)擊后，獲取scope.row的id屬性，然后通過this.$router.push({path:'...',query:{id:'...'}})，即可跳轉(zhuǎn)到相應(yīng)的詳情頁。

學(xué)會(huì)了嗎？別忘了自己打開電腦寫一寫練一練哦。

到此這篇關(guān)于vue中如何給el-table-column添加指定列的點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)el-table-column添加點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: