el-table テーブルの仮想化とスライダーの設定

テーブルの設定、特にスライダーの設定をメモして記録します

---

カードを使用してフォームをロードし、ページの右上に表示されるようにカードのスタイルを設定し、ページの上部になるように z-index 属性を設定し、次数を設定します。ぼかします。

<el-card class="texttable" :body-style="{ padding: '0px' }" style="width: 600px;">
    <el-table
        :data="datas"
        max-height="400" 
        style="background-color: #545c64;border: 0;margin: 0;"
        :header-cell-style="{'background-color': '#545c64','text-align':'center','color':'#fff'}"
        :cell-style="{'background-color': '#545c64','text-align': 'center','color':'#fff'}"
        >
        <!-- 表格内容 -->
    </el-table>
</el-card>

<style scoped>
/* 定位，置顶，虚化程度设置为0.85 */
.texttable {
    position: absolute;
    right: 100px;
    top: 100px;
    z-index: 999;
    opacity: 0.85;
}
/* 去除底部的白线 */
.el-table::before {
    height: 0;
}
/* 设置滚动快样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #353a3f;
    border-radius: 3px;
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
/* 隐藏表格头部多余的空白列 */
::v-deep .el-table th.gutter{
  display: none;
  width:0px
}
/* 隐藏表格主题的多余空白列 */
::v-deep .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
/* 强制表格主体填充整个宽度 */
::v-deep .el-table__body{
  width: 100% !important;
}
</style>

最終的な効果は次のとおりです。

 

el-tableでは、スクロールバーをここにセットすると表の行がずれてしまうので、意図的に表の行を追加していませんので、削除した方が綺麗なので追加していません。