Vue使用Element-UI生成并展示表頭序號的方法
前言
序號算是在展示數(shù)據(jù)的時候，一種很普遍的屬性了，我們可以自己寫生成序號的規(guī)則，也可以借助第三方。
這里我選擇后者，使用Element-UI自帶的一個table屬性，去生成并展示需要
首先看下我的頁面，是沒有序號的，這樣看起來有點(diǎn)凌亂，缺少什么東西一樣。
生成序號
在Element-UI官網(wǎng)中的table的眾多demo下，有這么一個demo：
我們可以利用里面的代碼，生成序號，demo里面的代碼比較長，我把核心代碼抽取出來了，如下：
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
methods: {
indexMethod(index) {
return index * 2;
}
}使用序號
把上面的核心代碼放到組件里面，一個最簡單的序號就出現(xiàn)了：
這里我為了展示這兩塊核心的代碼，刪除了我的表格屬性省略了部分代碼
自定義序號
這里簡單解釋下，index是從0開始的，因?yàn)榉祷氐氖莍ndex*2，所以相當(dāng)于每次0+=2這樣遞增，我們可以抓住這個特性，改變自增規(guī)則，實(shí)現(xiàn)自己想要的序號類型。
比如我現(xiàn)在想要從1開始，每次自增1，就可以這樣：
這里我感覺表頭不美觀，就新增了一些屬性，比如寬度，文本居中，表頭描述等
這樣一個自己想要的表頭序號就誕生了！
核心代碼：
<!-- 序號 -->
<el-table-column
type="index"
width="90"
align="center"
:index="indexMethod"
label="序號">
</el-table-column>
// 生成表頭序號
indexMethod(index) {
return index ;
},當(dāng)然，你可以根據(jù)自己想要的規(guī)則進(jìn)行隨意定義，滿足自己的需求即可。
注意
index是用0開始的，如果不自增1就會是這樣的：
序號一般都是從0開始的，這樣會顯得很怪。
只看序號好像有點(diǎn)難受，最后放一個完整版的數(shù)據(jù)，這樣就好多了，也顯示出序號的作用
到此這篇關(guān)于Vue使用Element-UI生成并展示表頭序號的方法的文章就介紹到這了,更多相關(guān)vue Element-UI展示表頭序號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue動態(tài)繪制四分之三圓環(huán)圖效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了使用vue實(shí)現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個v-model指令，非常好用，具體實(shí)現(xiàn)過程大家跟隨腳本之家小編一起看看吧2018-07-07
Vue3?實(shí)現(xiàn)網(wǎng)頁背景水印功能的示例代碼
這篇文章主要介紹了Vue3?實(shí)現(xiàn)網(wǎng)頁背景水印功能,這里水印的字體大小、顏色和排布參考了企業(yè)微信的背景水印，使得看起來不那么突兀，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種，之所以有這么多種方式，是為了滿足在不同場景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
在我們的印象使用中，vue除了寫業(yè)務(wù)代碼沒有特別新奇的功能了，今天就來看看如何自動化生成vue組件文檔2021-06-06
vscode中eslint插件的配置（prettier配置無效）
這篇文章主要介紹了vscode中eslint插件的配置（prettier配置無效），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
解決Vue2跨域報錯AxiosError?net::ERR_FAILED、?Network?Error、ERR_N
這篇文章主要給大家介紹了關(guān)于解決Vue2跨域報錯AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue項(xiàng)目啟動后如何在瀏覽器自動打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08