vue、element實(shí)現(xiàn)表格表頭縱向顯示方式

更新時(shí)間：2023年10月19日 14:30:33 作者：vividzll

這篇文章主要介紹了vue、element實(shí)現(xiàn)表格表頭縱向顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue、element實(shí)現(xiàn)表格表頭縱向顯示

大多數(shù)情況，我們的管理端都有表格展示數(shù)據(jù)，然而表格的展示基本都是表頭橫向展示，然后相應(yīng)的數(shù)據(jù)一行一行排列在下方。

先看一下element官網(wǎng)的el-table的樣子

那么我們?nèi)绻胍尡眍^縱向展示該如何實(shí)現(xiàn)呢？怎么樣？

是不是發(fā)現(xiàn)element官網(wǎng)沒有這樣的示例，有點(diǎn)難搞，哈哈，接下來咱們就來現(xiàn)場擼縱向表格展示，準(zhǔn)備好了嗎？

其實(shí)原理很簡單，一般的都是橫向展示，先定義第一行表頭，然后數(shù)據(jù)部分直接放在一個(gè)數(shù)組中進(jìn)行排序就可以渲染了，那么我們根據(jù)這個(gè)思路啟發(fā)一下：縱向表頭是不是也可以如此？

那當(dāng)然了，我們可以先定義一個(gè)縱向的表頭，再按照一列一列來進(jìn)行渲染表格數(shù)據(jù)，那么按照列來寫表頭，我們就可以使用table來進(jìn)行了

先來處理表頭

<table width="100%">
     <tr><td class="black_title">對(duì)比項(xiàng)</td></tr>
     <tr><td class="left_title bottom_border">表頭1</td></tr>
     <tr><td class="left_title bottom_border">表頭2</td></tr>
     <tr><td class="left_title bottom_border">表頭3</td></tr>
     <tr><td class="left_title bottom_border">表頭4</td></tr>
     <tr><td class="left_title bottom_border">表頭5</td></tr>
     <tr><td class="left_title bottom_border">表頭6</td></tr>
     <tr><td class="left_title bottom_border">表頭7</td></tr>
     <tr><td class="left_title bottom_border">表頭8</td></tr>
     <tr><td class="left_title bottom_border">表頭9</td></tr>
     <tr><td class="left_title bottom_border">表頭10</td></tr>
     <tr><td class="left_title bottom_border">。。。</td></tr>
</table>

其中我們只需要設(shè)置好每個(gè)單元格的樣式，然后我們就可以復(fù)制這樣的table了，只不過我們可以根據(jù)我們的數(shù)據(jù)來動(dòng)態(tài)添加table

<div v-for="(item, index) in tableData" :key="index">
                    <table width="100%">
                        <tr><td class="black_title">{{item.val1}}</td></tr>
                        <tr><td class="td_content">{{item.val2}}</td></tr>
                        <tr><td class="td_content">{{item.val3}}</td></tr>
                        <tr><td class="td_content">{{item.val4}}</td></tr>
                        <tr><td class="td_content">{{item.val5}}</td></tr>
                        <tr><td class="td_content">{{item.val6}}</td></tr>
                        <tr><td class="td_content">{{item.val7}}</td></tr>
                        <tr><td class="time_comtent">{{item.val8}}</td></tr>
                        <tr><td class="td_content">{{item.val9}}</td></tr>
                        <tr><td class="td_content">{{item.val10}}</td></tr>
                        <tr><td class="td_content">{{item.val11}}</td></tr>
                    </table>
                </div>

主體思路已經(jīng)OK了，那么這樣就能夠說可以達(dá)到要求嗎？

不行的，我們還得加上樣式上的要求！?。?/p>

那么這里我推薦使用flex布局，不是很清楚flex布局的可以先移步相關(guān)百度flex布局樣式介紹。

我們可以這樣來一個(gè)思路

比如定義一個(gè)大的div用來裝我們需要展示的表格，然后div里面一列就是一個(gè)table也用div進(jìn)行包裹，那么用上flex布局就可以動(dòng)態(tài)擺放這些div達(dá)到我們想要的效果：

<div class="" style="width:100%;display:flex;justify-content: space-between;">
                <div style="width:15%;box-shadow: 0 0 2px #000;">
                    <table width="100%">
                        //這里是表頭的table
                    </table>
                </div>
                <div v-for="(item, index) in tableData" :key="index" :style="'width:'+ calcWidth(tableData)+';box-shadow: 0 0 2px #000;'">
                    <table width="100%">
                        //這里是內(nèi)容的table
                    </table>
                </div>
            </div>

當(dāng)然我這里自己樣式的css有進(jìn)行設(shè)置，大家可根據(jù)自身要求進(jìn)行設(shè)置，也可以加一些el-button和點(diǎn)擊事件的元素在里面