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

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

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

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

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

先看一下element官網的el-table的樣子

那么我們如果想要讓表頭縱向展示該如何實現(xiàn)呢？怎么樣？

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

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

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

先來處理表頭

<table width="100%">
     <tr><td class="black_title">對比項</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>

其中我們只需要設置好每個單元格的樣式，然后我們就可以復制這樣的table了，只不過我們可以根據(jù)我們的數(shù)據(jù)來動態(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>

主體思路已經OK了，那么這樣就能夠說可以達到要求嗎？

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

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

我們可以這樣來一個思路

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

<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%">
                        //這里是內容的table
                    </table>
                </div>
            </div>

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