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