ElementUIテーブルtable JS制御でスクロール
4097 ワード
ElementUIテーブルtable JS制御でスクロール
需要
jsによってテーブルの行がビジュアル領域に表示されるように制御
分析と実装
ElementUIでは、テーブルtableコンポーネントのスクロールをサポートしています.ここではjs制御tableのscrollTopでニーズを実現します.
フレームワークはパッケージされたコンポーネント
補足
ここではjs制御なので、cssのアニメーションライブラリを使ってアニメーション効果を生成することはできませんが、いくつかのアニメーションjsライブラリを使って補助的に実現することができます.具体的には、自分で試してみてください.
需要
jsによってテーブルの行がビジュアル領域に表示されるように制御
分析と実装
ElementUIでは、テーブルtableコンポーネントのスクロールをサポートしています.ここではjs制御tableのscrollTopでニーズを実現します.
フレームワークはパッケージされたコンポーネント
el-table
であるが、tableを直接取得することはできない.私は、el-tableにおけるtableの位置を一歩一歩位置決めすることによって、ここでは位置決めプロセスを説明せず、直接結果を説明する.<el-table :data="tableData"
:highlight-current-row="true"
ref="canvasTable"
>
<el-table-column
:key="index"
:label="key.remark"
:prop="key.name"
v-for="(key, index) in columns"
>el-table-column>
el-table>
//bodyWrapper table
let bodyWrapper = this.$refs.canvasTable.bodyWrapper
// e
if (bodyWrapper.children[0].rows[e]) {
bodyWrapper.scrollTop = bodyWrapper.children[0].rows[e].offsetTop
}
補足
ここではjs制御なので、cssのアニメーションライブラリを使ってアニメーション効果を生成することはできませんが、いくつかのアニメーションjsライブラリを使って補助的に実現することができます.具体的には、自分で試してみてください.