ElementUIテーブルtable JS制御でスクロール


ElementUIテーブルtable 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ライブラリを使って補助的に実現することができます.具体的には、自分で試してみてください.