【Vue.js】Element Plusのtableのクラス操作（row-class-name）やクリックイベント（row-click）や列固定表示をしてみる

2024.12.20

Vue.js+Element Plusでのtableについて、以下の3点記載します！

クラス操作（row-class-name）
- 特定の行にクラスをつけたい場合に使用
クリックイベント（row-click）について
- 行クリックした場合に特定の関数を呼び出す
列固定表示
- 横スクロール時に一番左の列を固定表示にしてみる

Element Plusについて

まずは、Element Plusについて簡単に記載します。

Element Plusは、Vue3対応のUIライブラリです。

A Vue 3 UI Framework | Element Plus

A Vue 3 based component library for designers and developers

Element Plusのtableのクラス操作について

row-class-nameを使用して、特定の行にクラスをつけてみます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
:row-class-name="addClass"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
addClass({ row }) {
// 条件に応じてクラスを追加
if (row.Id === "1") {
return 'add-class';
}
return ''; // デフォルトでクラスを付けない
},
},
}
</script>

「:row-class-name="addClass"」でaddClassを呼び出し、addClass で追加するクラスを指定しています。

Element Plusのtableのクリックイベントについて

@row-clickを使用して、特定の行をクリック時に自前のメソッドを呼び出してみます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
clickRow( row ) {
alert(row.Id);
},
},
}
</script>

「@row-click="clickRow"」でclickRowを呼び出しています。clickRow に処理をしたい内容（詳細の表示とか）を記載できます。

Element Plusのtableの列固定表示について

カラムの設定で「fixed=“left”」を指定すると列固定表示できます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
fixed="left"
width="300"
/>
<el-table-column
prop="Name"
label="名前"
width="300"
/>
<el-table-column
prop="bikou"
label="備考"
width="300"
/>
</el-table>
</template>