0

Vue Table 2 を使用して、デフォルトの検索/フィルター入力と [レコード] ドロップダウンを使用したくありません。つまり、下の画像ではコントロールを使用したくありません。 デフォルトの検索コントロールのスクリーンショット

代わりに、テーブルの外に独自の入力ボックスを作成したいと考えています。上の画像を含むデフォルトの行を非表示にすることができます。ただし、独自の入力ボックスを追加した後-例:

    <input type="text" v-model="searchTerm" v-on:keyup='filterResult()' />,

filterResult()メソッドでフィルター要求を処理するフィルター イベントをトリガーするにはどうすればよいですか?

 data(){
        return {
            searchTerm:'',
            customFilters: [{
                name: 'mysearch',
                callback: function (row, query) {
                    return row.name[0] == query;
                }
            }],
        },
    },
    methods:{
        filterResult(){
           //how to trigger event to filter result using the searchTerm
        }
    }
4

1 に答える 1

1

このようなテーブル定義を考えると、テーブルtableoptionsに適用するオプションを含むオブジェクトです (これらはドキュメントと一致する必要がありcustomFiltersますcolumns) headings。

<v-client-table :options="tableoptions">
</v-client-table>

彼らのドキュメントでは、これを使用してカスタムフィルターをトリガーする必要があると書かれています

Event.$emit('vue-tables.filter::alphabet', query);

しかし、それが であるとは言えないため、js を次EventのVueTables.Eventように更新する必要があります。

data() {
    return {
      searchTerm: '',
      tableoptions: {
        customFilters: [{
          name: 'mysearch',
          callback: function(row, query) {
            //this should be updated to match your data objects
            return row.name[0] == query; 
          }
        }]
      },
    },
  },
  methods: {
    filterResult() {
      VueTables.Event.$emit('vue-tables.filter::mysearch', query);
    }
  }
于 2020-01-24T19:14:25.123 に答える