我目前正在处理一个表格,该表格显示来自不同应用程序的日志记录数据。该表显示的数据没有问题,因为这似乎是最容易起床的部分。
现在我需要一个自定义过滤器。如果“LogType”中的值为 1(即异常/错误日志),此过滤器需要突出显示红色行。 但是,在阅读他们的文档后,我无法让自定义过滤器工作。关于自定义过滤器的其他帖子,我可以在 Stackoverflow 上找到似乎有修复程序的地方,但它似乎对我不起作用。 (例如 Vue Tables 2 - Custom Filters)
至于有关 Vue tables 2 的文档,可能只是我不明白它们的真正含义。就像让它发挥作用所需要的那样。 ( vue-tables-2 - Custom filters Documentation )
我觉得我的问题可能是示例中的过滤器需要通过按下按钮来激活。一旦有数据要过滤,我的需要从哪里开始。但我完全不确定,因为我无法让自定义过滤器触发我放置在其中的“console.log()”,以查看它返回的数据。
下面的代码是我的Vue代码和选项。 开始时调用的“getErrorLogs(false) 方法调用一个 AJAX 调用,该调用返回提供给表的数据,它按预期工作。
getErrorLogs(false)
const ClientTable = VueTables.ClientTable
const Event = VueTables.Event
Vue.use(ClientTable)
vue = new Vue({
el: "#vueErrorLogs",
methods: {
applyFilter(number) {
this.selectedNumber = number;
Event.$emit('vue-tables.filter::exceptions', number);
}
},
data: {
numbers: ['0','1'],
selectedNumber: '',
columns: ['ActionName', 'Message', 'LogTime', 'ID', 'LogType', 'Area', 'ApplicationUser'],
data: {
tableData: getData()
},
options: {
headings: {
ActionName: 'Action Name',
Message: 'View Record',
LogTime: 'Log Time',
ID: 'ID',
LogType: 'Log Type',
Area: 'Code Area',
ApplicationUser: 'Application User',
},
sortable: ['ActionName', 'Message', 'ID', 'LogTime', 'LogType', 'Area', 'ApplicationUser'],
filterable: ['ActionName', 'Message', 'ID', 'LogType', 'Area', 'ApplicationUser'], //LogTime is missing since datepicker dosent work
perPage: 20,
filterByColumn: true,
toMomentFormat: true,
orderBy: {
column: 'LogTime',
ascending: false
},
customFilters: [{
name: 'exceptions',
callback: function (row, query) {
console.log("Row: ", row, " Query: ", query)
return row.name[0] == query;
}
}]
}
}
});
function getData() {
var data = [{}]
return data;
}
我的这部分代码是用于显示vue表格的HTML代码
<div id="vueErrorLogs">
<v-client-table :columns="columns" :data="data.tableData" :options="options">
<a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
</v-client-table>
</div>
更新 1: 到目前为止,我已经能够排除我无法使用 v-bind:class 来设置标签以获取根据需要分配给它们的“成功、危险或信息”引导类。
更新 2: 我找到了解决我的问题的解决方案,即使用 Bootstrap 类向 TR 标签添加颜色,它只是使用 rowClassCallBack 选项并在函数调用内部进行检查,然后返回类的所需字符串名称。例如:
rowClassCallback: function (row) {
if (row.LogType == 1)
return 'danger'
else
return 'default'
},
我仍然不知道为什么我的自定义过滤器不起作用
最佳答案
- 顾名思义,自定义过滤器用于向下过滤
行,而不是更改它们的属性(即在您的情况下添加
tr
匹配行数据的类) - 正如@ibanjo 所注意到的,您从不发出激活 自定义过滤器,这就是它不起作用的原因。
- 根据您自己的判断,正确的选项是
rowClassCallback
关于javascript - Vue Tables 2自定义过滤器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47649734/