快捷導(dǎo)航

關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件

更新時(shí)間：2022年09月07日 09:11:43 作者：沃特艾文兒～

這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Element-UI Table 表格指定列添加點(diǎn)擊事件

如下圖所示，這是一個(gè)ele UI庫(kù)中的table，一般情況下我們只能通過(guò)tableDATA來(lái)向里面填充數(shù)據(jù)來(lái)展示，而無(wú)法對(duì)其中添加點(diǎn)擊時(shí)間等操作。這里就來(lái)記錄學(xué)習(xí)一下。

這是我們的一般使用方法，只能將數(shù)據(jù)進(jìn)行展示。我們需要在el-table-column標(biāo)簽里面來(lái)進(jìn)行處理

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

我們?cè)跇?biāo)簽里面加上我們自定義的標(biāo)簽，可以通過(guò){{scope.row.title}}的方法來(lái)獲取數(shù)據(jù)，并來(lái)修改展示的效果。

如下面所示。

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
            <template slot-scope="scope">
              <a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{
                  scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

element-ui table表格錯(cuò)位問(wèn)題

問(wèn)題描述

在使用element-ui中的 el-table 時(shí)，使用了 fixed 屬性固定列之后，就會(huì)容易在各種場(chǎng)景出現(xiàn)表格錯(cuò)位的問(wèn)題。

解決方案

解決辦法1 element-ui官網(wǎng)提供的doLayout方法：

doLayout：對(duì) Table 進(jìn)行重新布局。當(dāng) Table 或其祖先元素由隱藏切換為顯示時(shí)，可能需要調(diào)用此方法

直接在渲染表格時(shí)加入此方法

this.$nextTick(() => {
? ? ? // myTable是表格的ref屬性值
? ? ? if (this.$refs.myTable && this.$refs.myTable.doLayout) {
? ? ? ? this.$refs.myTable.doLayout();
? ? ? }
})

解決辦法2 element-ui官網(wǎng)提供的doLayout方法：

1.給所有的列增加width,即可解決

2.把加了fixed屬性的固定列的 min-width 改成 width

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue如何在頁(yè)面刷新時(shí)進(jìn)行重定向
這篇文章主要為大家詳細(xì)介紹了Vue如何在頁(yè)面刷新時(shí)進(jìn)行重定向,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2025-01-01
解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題
今天小編就為大家分享一篇解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
$解決vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問(wèn)題$
解決vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問(wèn)題
這篇文章主要介紹了vue?vite啟動(dòng)項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類問(wèn)題的原因所在并給出解決方法，需要的朋友可以參考下
2022-09-09
vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來(lái)就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來(lái)介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下
2023-09-09
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
Vue $router.push打開(kāi)新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開(kāi)頁(yè)面,但通過(guò)結(jié)合window.open方法和$router.resolve方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
vue @input和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue控制滾動(dòng)條滑到某個(gè)位置的方法實(shí)例
當(dāng)容器有滾動(dòng)條時(shí),有時(shí)需要將滾動(dòng)條滑到某個(gè)位置,下面這篇文章主要給大家介紹了關(guān)于vue控制滾動(dòng)條滑到某個(gè)位置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
讓你30分鐘快速掌握vue3教程
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04