web-dev-qa-db-ja.com

特定のヘッダーを非表示にし、それをvuetifyデータテーブルの対応する列に表示します

いくつかのクラスをアタッチできることがここにリストされており、これは.iの面倒を見ることになり、これを使用する方法についてはまだ混乱しています。

https://github.com/vuetifyjs/vuetify/pull/1863

コードペン

 https://codepen.io/anon/pen/OBMZgB

カロリーの列を非表示にしたいとします。次に、どうすればよいですか。

vue.jsvuetify.js
4
Rohit Kumar

Headersオブジェクトは計算されたプロパティにすることができるため、CSSで非表示にする必要はありません。 ComputedHeaders関数でヘッダー配列をフィルタリングします。

computed: {
   computedHeaders () {
      return this.headers.filter(....Your filter logic here)  
   }
}

ヘッダーの代わりに 'computedHeaders'を指すようにHTMLのヘッダーバインドを変更します

:headers="computedHeaders"
11
jakhicks

（たとえば、検索入力を使用して）列をフィルター可能にする必要がある場合は、ヘッダーのalignプロパティにd-none（先行スペース付き）を追加するだけです。

headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name',
    },
    { text: 'Category', value: 'category', align: ' d-none' }, // ' d-none' hides the column but keeps the search ability
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ]

例：カテゴリ列を非表示にして、それを検索できるようにする場合。

https://codepen.io/simondepelchin/pen/JjjEmGm

編集：テーブルがモバイル行に切り替わったときにもヘッダーが表示されることに注意してください。

12
SimonDepelchin

拡張 SimonDepelchinの答え ：

特定の列のヘッダー仕様のalignプロパティ。

{ text: 'some text', value: 'category', align: 'XXX' },

このように、指定された<td>要素のclassプロパティに変換されます

<td class="text-XXX">{{item.category}}</td>

XXXがスペースで始まる場合、これを使用してtdセルに任意のクラスを与えることができます。

{ text: 'some text', value: 'category', align: ' d-none' },

なる

<td class="text- d-none">{{item.category}}</td>

d-noneは vuetify.min.css で.d-none{display:none!important}.v-applicationとして定義されています。ただし、このトリックを機能させるために vuetify.min.css をロードする必要はありません。CSS定義のどこかに.d-none{display:none!important}を置くだけです。

ただし、テーブルが応答してモバイルビューに変更されると、alignの値は無視されるため、対応する要素は非表示になりません。

3
Ansa211