[el-table] 请教一下 element-ui 里的 el-table 组件的固定列是什么原理?


#1

先道歉,确实可以去看源码,但是小弟尝试了一下,失败了……没看明白。
传送门


就是,像第二列跑第一列下面这种效果,大佬们能提供一点思路小弟就万分感谢了!
(如何在不依赖 element 的情况下做出这种效果)


#2

您好,我不太明白您要問的問題,您是想要這個效果嗎?

文件說明如下

固定列需要使用fixed属性,它接受 Boolean 值或者leftright,表示左边固定还是右边固定。


#3

@regchiu 不好意思没描述清楚,已更新问题。


#4

明白了,是不使用element做出這種效果嗎?


#5

@regchiu 是的


#6

使用 CSS 裡面的 position: fixed


#7

其实这个,你可以看一下element-ui的css样式


#8

没看出来有什么特别的地方,,,,


#9

你是认真的吗:fearful:


#10

大概就是這樣吧,把視窗拉到跟表格差不多大就看得出效果了。
抱歉我一開始只想到 position:fixed ,但因為在表格上所以應該是使用 sticky ,類似relative + fixed。

html

    <div>
            <table>
                <thead>

                    <tr>

                        <th></th>

                        <th></th>

                        <th></th>

                        <th></th>

                        <th></th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                        <td></td>

                    </tr>



                </tbody>

            </table>

        </div>

css

    div{

        overflow:auto;
       
        width:100%;
       
        height:108px; /* 固定高度 */
       
       }
       
       td, th {
       
        border:1px solid gray;
       
        width:100px;
       
        height:30px;
       
       }
       
       th {
       
        background-color:lightblue;
       
       }
       
       
       table {
       
        table-layout: fixed;
       
        width: 200px; /* 固定寬度 */
       
       }
       
       td:first-child, th:first-child {
       
        position:sticky;
       
        left:0; /* 首行永遠固定於左 */
       
        z-index:1;
       
        background-color:lightpink;
       
       }
       
       thead tr th {
       
        position:sticky;
       
        top:0; /* 列首永遠固定於上 */
       
       }
       
       th:first-child{
       
        z-index:2;
       
        background-color:lightblue;
       
       }

#11

感谢!
但是 ie11 不支持 sticky……
刚才看到一个有意思的库


#12

不會!很高興有幫助到你 :grinning:


#13

你可以看页面生成的元素,他有一个原本数据的table,当选择了fixed,然后有个固定列的table的div覆盖,直观感觉就是无痕