vue
1<template lang="pug"> 2b-table( 3 responsive 4 hover 5 id="main-table" 6 :fields="fields" 7 :items="items" 8 :per-page="perPage" 9 :current-page="currentPage" 10 :tbody-tr-class="rowClass" 11 @row-clicked="testClick" 12 ) 13</template> 14<script lang="ts"> 15export default defineComponent({ 16 components: {}, 17 props: { 18 fields: { type: Array }, 19 items: { type: Object }, // items = [{status: 1, name: 山田},{status: 2, name: 木村}] 20 }, 21 22 setup(props, { emit }) { 23 24 const testClick = (item: any) => { 25 console.log("反応します") 26 }; 27 28 const rowClass = () => { 29 props.items?.forEach(test => { 30 if (test.status === 1) { 31 return 'text-success' 32 } else { 33 return 34 } 35 }); 36 } 37 38 onBeforeMount(async () => { 39 rowClass() 40 }); 41 42 return { 43 props, 44 testClick, 45 rowClass, 46 }; 47 }, 48}); 49</script> 50// 関係ない細かいところは省略
公式ドキュメント
vueBootstrapを使い、テーブルで特定の条件の行をグレーアウトさせたいのですが、やり方がわかりませんでした。
やったこととしましては、上記のように:tbody-tr-classをつかい、特定の行を色を変更することはできたのですが非活性にするやり方がわかりません。
b-tableの特定の行をグレーアウトする方法、もしくは@row-clickedがその行だけ適用されなくする方法についてご教授いただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。