Vue使用Element-UI生成并展示表頭序號的方法
前言
序號算是在展示數(shù)據(jù)的時(shí)候，一種很普遍的屬性了，我們可以自己寫生成序號的規(guī)則，也可以借助第三方。
這里我選擇后者，使用Element-UI自帶的一個(gè)table屬性，去生成并展示需要
首先看下我的頁面，是沒有序號的，這樣看起來有點(diǎn)凌亂，缺少什么東西一樣。
生成序號
在Element-UI官網(wǎng)中的table的眾多demo下，有這么一個(gè)demo：
我們可以利用里面的代碼，生成序號，demo里面的代碼比較長，我把核心代碼抽取出來了，如下：
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
methods: {
indexMethod(index) {
return index * 2;
}
}使用序號
把上面的核心代碼放到組件里面，一個(gè)最簡單的序號就出現(xiàn)了：
這里我為了展示這兩塊核心的代碼，刪除了我的表格屬性省略了部分代碼
自定義序號
這里簡單解釋下，index是從0開始的，因?yàn)榉祷氐氖莍ndex*2，所以相當(dāng)于每次0+=2這樣遞增，我們可以抓住這個(gè)特性，改變自增規(guī)則，實(shí)現(xiàn)自己想要的序號類型。
比如我現(xiàn)在想要從1開始，每次自增1，就可以這樣：
這里我感覺表頭不美觀，就新增了一些屬性，比如寬度，文本居中，表頭描述等
這樣一個(gè)自己想要的表頭序號就誕生了！
核心代碼：
<!-- 序號 -->
<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)難受，最后放一個(gè)完整版的數(shù)據(jù)，這樣就好多了，也顯示出序號的作用
到此這篇關(guān)于Vue使用Element-UI生成并展示表頭序號的方法的文章就介紹到這了,更多相關(guān)vue Element-UI展示表頭序號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點(diǎn)，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時(shí)應(yīng)注意的一些問題，希望能幫助到大家2021-09-09
el-date-picker時(shí)間清空值為null處理方案
本文介紹關(guān)于Vue.js項(xiàng)目中時(shí)間選擇器組件的問題,當(dāng)選擇后清空導(dǎo)致值變?yōu)閚ull,進(jìn)而引發(fā)后臺接口報(bào)錯(cuò),通過監(jiān)聽`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問題,確保了數(shù)據(jù)正確性,同時(shí),建議避免直接監(jiān)聽整個(gè)對象以優(yōu)化性能,感興趣的朋友一起看看吧2024-08-08
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue2.x對象單層劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
詳解vue3?defineModel如何實(shí)現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開發(fā)者可以更加簡潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來學(xué)習(xí)一下如何使用defineModel實(shí)現(xiàn)雙向綁定吧2024-12-12