- 開発技術
Element Plusの表でラジオボタンの項目を複数グループ化する例
- #Element Plus
- #VueJS
この記事を書いたチーム：frontier
はじめに
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
Vue.jsとElement Plusで、ある表(el-tableタグ)のラジオボタン(el-radioタグ)の項目で、複数のグループに分けて表示させるという経験をしたため、その時の実装イメージを簡単な例でご紹介させていただきます。下図が具体例でして、No = 1、2のレコードがあるラジオボタンのグループ、No = 4、5のレコードが別のラジオボタンのグループとなり、複数のラジオボタンのグループが存在します。
実装方法について
下記は実装イメージのソースコードとなります。下記のような考えで実装しています。
- ラジオボタン(selectedRadioButton)=”1”はラジオボタンが選択された状態となります。
- ラジオボタングループ(groupId)が同じ値のレコードでラジオボタンがグループ化されます。変数groupSelectionsでラジオボタングループごとにどのレコードが選択された状態であるかを保持しています。
- ラジオボタンを表示しない場合、ラジオボタングループ(groupId)をnullとしています。
- editInitialDataメソッドでは、各レコードのselectedRadioButtonをチェックすることで初期表示時にどのラジオボタンを選択するか制御しています。
- ラジオボタンの選択が変更されたときに、handleGroupSelectionsChangeメソッドでその状態を変数groupSelectionsに反映させています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<template> <el-table :data="data" :border="true" > <el-table-column label="No" prop="rowNo" align="left" > </el-table-column> <el-table-column label="ラジオボタン" prop="selectedRadioButton" align="center" > <template v-slot="{ row }"> <el-radio v-if="row.groupId !== null" v-model="groupSelections[row.groupId]" :value="row.rowNo" :name="row.groupId" @change="handleGroupSelectionsChange(row.groupId, row.rowNo)" /> </template> </el-table-column> <el-table-column label="ラジオボタングループ" prop="groupId" align="left" > </el-table-column> </el-table> </template> <script setup> import { ref, onMounted, reactive } from 'vue' // 表示データ const data = ref( [ { rowNo: 1, selectedRadioButton: "0", groupId: "グループ1", }, { rowNo: 2, selectedRadioButton: "1", groupId: "グループ1", }, { rowNo: 3, selectedRadioButton: null, groupId: null, }, { rowNo: 4, selectedRadioButton: "1", groupId: "グループ2", }, { rowNo: 5, selectedRadioButton: "0", groupId: "グループ2", }, ] ) // ラジオボタングループごとに、どのレコードが選択されているかを保持 const groupSelections = reactive({}) // ラジオボタンの初期表示時の処理 const editInitialData = (data) => { if (data) { data.value.forEach((row) => { if (row.selectedRadioButton === "1") { if (!groupSelections[row.groupId]) { groupSelections[row.groupId] = row.rowNo } } }) } } // ラジオボタンが変更された時に、ラジオボタンのグループごとの選択行の情報を更新 const handleGroupSelectionsChange = (groupId, selectedRow) => { groupSelections[groupId] = selectedRow } /** マウント時 */ onMounted(() => { editInitialData(data) }) </script> <style lang="scss" scoped></style> |
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
