Question

所以我正在使用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
    }];
}

Answer 1

您可以使用名为 rowAttributesCallback 的类似方法代替 rowClassCallback 将参数传递给row。

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

Vue Tables 2自定义行样式

1 个答案: