Vue表2 - 自定义过滤器

作者: 日耀九洲
发布时间: 2025-02-20 09:55:59 (10小时前)
转自：

3 条回复

0#
回复此人
日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现这一课对我有所帮助。 <a href="https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13" rel="nofollow noreferrer"> https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13 </A> </p> <P> 摘要：你应该发射事件 <code> vue-events </code> 使用Vuex打包或计算属性（推荐）。你想用 <code> :append-params="moreParams" </code> 在vuetable上，这是附加到的vuetable2的一个特性 <code> api-url </code> 以及分页值（与这些参数分开）。我正在使用Vuex，因此我将moreParams作为vuetable的计算属性。它用 <code> this.$store.getters.moreParams </code> 这是我的Vuex getter，因为我有多个搜索字段。这对输入字段处理程序的Vuex提交有反应。 </p> <pre> <code> computed: { moreParams() { return this.$store.getters.moreParams }, }, </code> </pre> <P> 否则你可以使用$ store.stage.property。我有一个关于moreParams的监视，它使用新查询刷新表： </p> <pre> <code> watch: { moreParams(newVal, oldVal) { this.$nextTick(() => { this.$refs.vuetable.refresh() }) }, }, </code> </pre> </DIV>

编辑
1#
回复此人
撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 文档可以更好地描述这一点。理解起来有点困难。 </p> <P> 您需要导入命名导出 <code> Event </code> vue-tables-2，因此您拥有表的事件总线并在自定义单击处理程序中发出自定义事件。 </p> <P> 在演示中，它可用于全局对象。在ES6中，您将按照文档中的描述导入它 <code> import {ServerTable, ClientTable, Event} from 'vue-tables-2'; </code> </p> <P> 请查看下面或此处的字母表过滤器演示 <a href="https://jsfiddle.net/awolf2904/eca4ms62/" rel="nofollow noreferrer"> 小提琴 </A> 。 </p> <P> 该演示类似于您可以找到的vue-tables-1演示小提琴 <a href="https://jsfiddle.net/matfish2/f5h8xwgn/" rel="nofollow noreferrer"> 这里 </A> 。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> // Vue.use(VueTables) const ClientTable = VueTables.ClientTable const Event = VueTables.Event // import eventbus console.log(VueTables); Vue.use(ClientTable) new Vue({ el: "#people", methods: { applyFilter(letter) { this.selectedLetter = letter; Event.$emit('vue-tables.filter::alphabet', letter); } }, data() { return { letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], selectedLetter: '', columns: ['id', 'name', 'age'], tableData: [{ id: 1, name: "John", age: "20" }, { id: 2, name: "Jane", age: "24" }, { id: 3, name: "Susan", age: "16" }, { id: 4, name: "Chris", age: "55" }, { id: 5, name: "Dan", age: "40" }], options: { // see the options API customFilters: [{ name: 'alphabet', callback: function(row, query) { return row.name[0] == query; } }] } } } }); </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> #people { text-align: center; width: 95%; margin: 0 auto; } h2 { margin-bottom: 30px; } th, td { text-align: left; } th:nth-child(n+2), td:nth-child(n+2) { text-align: center; } thead tr:nth-child(2) th { font-weight: normal; } .VueTables__sort-icon { margin-left: 10px; } .VueTables__dropdown-pagination { margin-left: 10px; } .VueTables__highlight { background: yellow; font-weight: normal; } .VueTables__sortable { cursor: pointer; } .VueTables__date-filter { border: 1px solid #ccc; padding: 6px; border-radius: 4px; cursor: pointer; } .VueTables__filter-placeholder { color: #aaa; } .VueTables__list-filter { width: 120px; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.js"></script> <div id="people"> <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}"> {{letter}} </button> <button class="btn btn-default" @click="applyFilter('')"> clear </button> <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论