理解vue之element ui中的

2021-09-28 19:36:55 字數 1556 閱讀 1256

如果有用過element-ui中的table元件,可能會發現有這麼乙個寫法:

在實際的使用過程中,這種用法當然不僅僅侷限於此,其他的地方也會用到。到底這裡有什麼特別之處呢?

我們看看普通的table用法:

我們先說一說這個基礎的用法裡面,在el-table中,:data="tabledata"是資料集,結構如下:

那麼對於每乙個el-table-column,我們只需要使用prop="date",就可以將該列的資料繫結為該陣列所有的物件中的「date」屬性,我們可以理解為對於tabledata,這裡始終取的是tabledata[$index].date。

table按照tabledata這個陣列的長度來生成多少行,按照有多少個el-table-column來生成多少列。

現在我們可以看更高階的用法,也就是我們標題提到的

label=

"日期"

width=

"180"

>

"scope"

>

="el-icon-time"

>

<

/i>

"margin-left: 10px"

>

}<

/span>

<

/template>

<

/el-table-column>

按照我們前面的理解,按照有多少個el-table-column來生成列,因此這裡沒有使用prop="date",生成的單元格也就是空白的乙個單元格。

template(模版) 在這裡屬於乙個固定用法:

通過scoped slot可以獲取到 row, column, $index 和 store(table 內部的狀態管理)的資料

我們可以理解為:tabledata是給到table的記錄集,scope是table內部基於tabledata生成出來的,我們可以用excel描繪一下

我們傳進去的tabledata,在table內部生成了類似於excel的scope,因此,通過scope.row.date,我們就可以讀取到每一行中的date。

還有重要的一點,scope又並非是整個table,我們只是能通過scope.row獲得當前的行資料,至於具體為什麼,目前我還沒有理解得很透徹。只是希望按照這個理解,能記住多點關於scope的使用。

如果有用過element-ui中的table元件,可能會發現有這麼乙個寫法:

理解vue之element ui中的

在el table中,data tabledata 是資料集 table按照tabledata這個陣列的長度來生成多少行,按照有多少個el table column來生成多少列。label 日期 width 180 scope el icon time i margin left 10px span...

VUE實戰之引入ElementUI

本文在完成初始化的vue專案中引入elementui,vue專案的搭建過程請在目錄中跳轉相應頁面。npm i element ui s如圖所示,則說明安裝成功 安裝ui後需要引入,引入的方式多種多樣,下面介紹一種常用的引入方式。在main.js中加入下面三行 引入element元素 import e...

Vue 之 Element ui 按需匯入

在使用 vue 開發專案中,我們一般會選擇 elment ui 因為這個庫是基於 vue 並且有很多現成的元件供我們使用。我們可以根據官方文件直接在 main.js 中引入,但是這樣在最後專案開發完成後打包體積過大,建議是按需匯入,因為有些元件我們是用不到的。yarn add babel plugi...