Appearance

On this page

Table表格 ​

基础用法 ​

⚠:td元素下,如需单行文本省略，添加类名 ellipsis，默认max-width: pxToRem(200)

title_1title_2title_3
第一行内容内容内容content_内容12content_内容13
单行文本内容省略单行文本内容省略单行content_内容content_内容
content_内容content_内容content_内容
content_内容content_内容content_内容
标题title_2title_3
第一行内容内容内容content_1$content_1
第一行内容内容内容content_1$content_1
第一行内容内容内容content_1$content_1
第一行内容内容内容content_1$content_1
title_1title_2title_3title_4
第一行内容内容内容content_1$content_1$content_1
第一行内容内容内容content_1$content_1$content_1
第一行内容内容内容content_1$content_1$content_1
第一行内容内容内容content_1$content_1$content_1
第一行内容内容内容content_1$content_1$content_1
展开查看
vue
<template>
    <label>默认布局</label>
    <div class="biz-native-table">
        <table>
            <tr>
                <th>title_1</th>
                <th>title_2</th>
                <th>title_3</th>
            </tr>
            <tr>
                <td>第一行内容内容内容</td>
                <td>content_内容12</td>
                <td>content_内容13</td>
            </tr>
            <tr>
                <td class="ellipsis">单行文本内容省略单行文本内容省略单行</td>
                <td>content_内容</td>
                <td>content_内容</td>
            </tr>
            <tr>
                <td>content_内容</td>
                <td>content_内容</td>
                <td>content_内容</td>
            </tr>
            <tr>
                <td>content_内容</td>
                <td>content_内容</td>
                <td>content_内容</td>
            </tr>
        </table>
    </div>
    <label>边框表格</label>
    <div class="biz-native-table border" style="--border-color:rgba(0, 156, 255, 0.3)">
        <table>
            <tr>
                <th>标题</th>
                <th>title_2</th>
                <th>title_3</th>
            </tr>
            <tr v-for="i in 4" :key='i'>
                <td>第一行内容内容内容</td>
                <td>content_1</td>
                <td>$content_1</td>
            </tr>
        </table>
    </div>
    <label>斑马纹表格</label>
    <div class="biz-native-table stripe">
        <table>
            <tr>
                <th>title_1</th>
                <th>title_2</th>
                <th>title_3</th>
                <th>title_4</th>
            </tr>
            <tr v-for="i in 5" :key='i'>
                <td>第一行内容内容内容</td>
                <td>content_1</td>
                <td>$content_1</td>
                <td>$content_1</td>
            </tr>
        </table>
    </div>
</div>
</template>

<style>
.biz-native-table{
   width:100%;
   height:350px; /* 固定高度 */
}
</style>

支持滚动 ​

title_1title_2title_3title_4title_5title_6title_7
第1行内容content_1content_1content_1content_1content_6content_内容内容内容
第2行内容content_1content_1content_1content_1content_6content_内容内容内容
第3行内容content_1content_1content_1content_1content_6content_内容内容内容
第4行内容content_1content_1content_1content_1content_6content_内容内容内容
第5行内容content_1content_1content_1content_1content_6content_内容内容内容
title_1title_2title_3title_4title_5
第1行内容内容content1content1content1content1
第2行内容内容content2content2content2content2
第3行内容内容content3content3content3content3
第4行内容内容content4content4content4content4
第5行内容内容content5content5content5content5
第6行内容内容content6content6content6content6
第7行内容内容content7content7content7content7
第8行内容内容content8content8content8content8
第9行内容内容content9content9content9content9
第10行内容内容content10content10content10content10
title_1title_2title_3title_4title_5title_6
第1行内容内容内容单行文本省略content_1内容content_1内容content_1内容content_1内容内容content
第2行内容内容内容单行文本省略content_2内容content_2内容content_2内容content_2内容内容content
第3行内容内容内容单行文本省略content_3内容content_3内容content_3内容content_3内容内容content
第4行内容内容内容单行文本省略content_4内容content_4内容content_4内容content_4内容内容content
第5行内容内容内容单行文本省略content_5内容content_5内容content_5内容content_5内容内容content
第6行内容内容内容单行文本省略content_6内容content_6内容content_6内容content_6内容内容content
第7行内容内容内容单行文本省略content_7内容content_7内容content_7内容content_7内容内容content
第8行内容内容内容单行文本省略content_8内容content_8内容content_8内容content_8内容内容content
第9行内容内容内容单行文本省略content_9内容content_9内容content_9内容content_9内容内容content
展开查看
vue
<template>
     <label>表格-x轴滚动</label>
    <div class="biz-native-table scrollX">
        <table>
            <tr>
                <th>title_1</th>
                <th>title_2</th>
                <th>title_3</th>
                <th>title_4</th>
                <th>title_5</th>
                <th>title_6</th>
                <th>title_7</th>
            </tr>
            <tr v-for="i in 5" :key='i'>
                <td>第{{i}}行内容</td>
                <td>content_1</td>
                <td>content_1</td>
                <td>content_1</td>
                <td>content_1</td>
                <td>content_6</td>
                <td>content_内容内容内容</td>
            </tr>
        </table>
    </div>
    <label>表格-Y轴滚动(头部悬浮添加类名fixed)</label>
    <div class="biz-native-table  scrollY fixed">
        <table>
            <tr>
                <th>title_1</th>
                <th>title_2</th>
                <th>title_3</th>
                <th>title_4</th>
                <th>title_5</th>
            </tr>
            <tr v-for="i in 10" :key="i">
                <td>第{{i}}行内容内容</td>
                <td>content{{i}}</td>
                <td>content{{i}}</td>
                <td>content{{i}}</td>
                <td>content{{i}}</td>
            </tr>
        </table>
    </div>
    <label>表格-XY轴滚动，固定标题(加类名fixed)</label>
    <label>固定行列--由样式实现</label>
    <div class="biz-native-table scrollXY stripe fixed">
        <table>
            <tr style="z-index:1">
                <th class="wth">title_1</th>
                <th class="wth fixedR fixedC fixedTh">title_2</th>
                <th class="wth">title_3</th>
                <th class="wth">title_4</th>
                <th class="wth">title_5</th>
                <th class="wth">title_6</th>
            </tr>
            <tr v-for="i in 9" :key='i' :class="i === 2 ? 'fixedTR' : ''" class="ellipsis">
                <td class="wth ellipsis">第{{i}}行内容内容内容单行文本省略</td>
                <td class="wth fixedC fixedTd">content_{{i}}</td>
                <td class="wth">内容content_{{i}}</td>
                <td class="wth">内容content_{{i}}</td>
                <td class="wth">内容content_{{i}}</td>
                <td class="wth">内容内容content</td>
            </tr>
        </table>
    </div>
</template>

<style lang="scss">
.biz-native-table{
   width:100%;
   height:350px;

    &.scrollX {
        th,
        tr {
            width: 150px; /* 必须设置宽度 */
        }
    }
    &.scrollXY{
        table {
            tr:nth-child(4) {
                position: sticky;
                top: pxToRem(48); /* 内容第二行固定在标题下 */
                z-index: 2;
            }

            td:nth-child(2),
            th:nth-child(2) {
                position: sticky;
                left: 0; /* 第二列固定在左 */
                z-index: 1;
            }

            th:nth-child(2) {
                z-index: 3;
            }
        }
    }   
}     
</style>