Vue Tables 2 自定义行样式

Question

所以我正在使用 vue tables 2 并且发现问题不大。假设我正在获取项目列表并且它们具有名为状态的列，每个状态都是常量，现在我需要获取转换后的值，因此在此处设置关系状态=键（常量）。 Table 翻译后的值有颜色，我想用它来填充行。

我在文档中看到有 rowClassCallback，但我想 return 内联样式，例如：background-image: $color（用于选定状态）。

即使在这个函数 (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"};
    }
}

Vue Tables 2 自定义行样式

Vue Tables 2 custom row style

vue.js

vuejs2

vue-tables-2