所以我正在使用vue tables 2并没有发现什么问题。 假设我正在获取项目列表,并且它们具有名为status的列,每个状态都是常量,现在我需要获取转换后的值,因此在此处将status = key(constant)设置为关系。 具有转换值的表格具有我要用来填充行的颜色。
我在文档中看到有rowClassCallback,但是我想返回内联样式,例如:background-image:$ color(用于选定状态)。
即使在此函数(rowClassCallback)中,我也无法检查color的值,因为它位于数据中。
在这里,rowClassCallback是我要做的示例。
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['name', 'code', 'uri'],
data: getData(),
options: {
headings: {
name: 'Country Name',
code: 'Country Code',
uri: 'View Record'
},
editableColumns: ['name'],
sortable: ['name', 'code'],
filterable: ['name', 'code'],
rowClassCallback: row => {
return `background-color: ${this.getProperColor(row.id)}`;
}
}
},
methods: {
getProperColor(id) {
if (id === 245) {
return "#32CD32"
}
}
},
});
function getData() {
return [{
code: "ZW",
name: "Zimbabwe",
created_at: "2015-04-24T01:46:50.459583",
updated_at: "2015-04-24T01:46:50.459593",
uri: "http://api.lobbyfacts.eu/api/1/country/245",
id: 245
}, {
code: "ZM",
name: "Zambia",
created_at: "2015-04-24T01:46:50.457459",
updated_at: "2015-04-24T01:46:50.457468",
uri: "http://api.lobbyfacts.eu/api/1/country/244",
id: 244
}, {
code: "YE",
name: "Yemen",
created_at: "2015-04-24T01:46:50.454731",
updated_at: "2015-04-24T01:46:50.454741",
uri: "http://api.lobbyfacts.eu/api/1/country/243",
id: 243
}, {
code: "EH",
name: "Western Sahara",
created_at: "2015-04-24T01:46:50.452002",
updated_at: "2015-04-24T01:46:50.452011",
uri: "http://api.lobbyfacts.eu/api/1/country/242",
id: 242
}, {
code: "RS",
name: "Serbia",
created_at: "2015-04-24T01:46:50.342496",
updated_at: "2015-04-24T01:46:50.342501",
uri: "http://api.lobbyfacts.eu/api/1/country/196",
id: 196
}];
}
答案 0 :(得分:2)
您可以使用名为 rowAttributesCallback 的类似方法代替 rowClassCallback 将参数传递给row。
options: {
editableColumns: ['name'],
sortable: ['name', 'code'],
filterable: ['name', 'code'],
rowAttributesCallback: row => {
return {"style": "color: red"};
}
}