Vue Tables 2 自定义行样式

Question

所以我使用vue tables 2 并发现小问题。 假设我正在获取项目列表并且它们有名为状态的列，每个状态都是恒定的，现在我需要获取翻译的值，因此在这里建立关系状态 = 键（常数）。 带有翻译值的表格具有我想用来填充行的颜色。

我在文档中看到有 rowClassCallback，但我想返回内联样式，例如：background-image: $color (for selected status)。

即使在这个函数 (rowClassCallback) 中，我也无法检查颜色的值，因为它在数据中。

这里的选项 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
    }];
}

Answer 1

您可以使用名为 rowAttributesCallback 而不是 rowClassCallback 的类似方法将参数传递给行。

options: {
    editableColumns: ['name'],
    sortable: ['name', 'code'],
    filterable: ['name', 'code'],
    rowAttributesCallback: row => {
        return {"style": "color: red"};
    }
}