1

我是一名网页设计师，我正在laravel 5.8与之合作vue js 2，这是我公司的工作。

我有一个vue很好的表格组件，我希望在标志（语言）列中有一个带有下拉选项的过滤器。

选项（语言列表（例如：pt、fr 和 gb））来自数据库的axios请求。

不希望语言以语言名称出现在过滤器选项中，但带有“span”作为标志图标

（例如："<span :class="'flag-icon flag-icon-gb flag-icon-squared'"></span>"）。

此示例适用于行范围并获取标志，但在过滤器中我可以将其转换为 html，只需将该行作为纯文本提供。

我已经尝试过"html: true,"和"htmlContent: <span></span>"

行标志的范围工作得很好

vue 组件范围

<template slot="table-row" slot-scope="row">
    <span class="text-center" v-if="row.column.field == 'language.name'">
        <span :class="'flag-icon flag-icon-' + row.formattedRow[row.column.field] + ' flag-icon-squared'"></span>
    </span>
    <span v-else>
        {{ row.formattedRow[row.column.field] }}
    </span>
</template>

表数据

data() {
    return {
        columns: [
            {
                label: 'Name',
                field: 'user.name',
                filterOptions: {
                    enabled: true
                }
            },
            {
                label: 'Country',
                field: 'language.name',
                html: true,
                filterOptions: {
                    enabled: true,
                    filterDropdownItems: []
                }
            },
            {
                label: 'Status',
                field: 'status.name',
                filterOptions: {
                    enabled: true,
                    filterDropdownItems: []
                }
            },
            {
                label: 'Property',
                field: 'property.title',
                filterOptions: {
                    enabled: true,
                    filterDropdownItems: []
                }
            },
            {
                label: 'Last Reply',
                field: 'updated_at',
                type: 'date',
                dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
                dateOutputFormat: 'Do MMM YYYY',
                filterOptions: {
                    enabled: true
                }
            },
            {
                label: 'Create Date',
                field: 'created_at',
                type: 'date',
                dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
                dateOutputFormat: 'Do MMM YYYY',
                filterOptions: {
                    enabled: true
                }
            },
        ],
        rows: [],
        totalRecords: 0,
        serverParams: {
        columnFilters: {},
        sort: {
            field: '',
            type: '',
        },
        page: 1,
        perPage: 10
        }
    }
},

我获取语言列表并尝试将跨度放入过滤器选项的 axios 请求

vue               
getLanguages() {
    let url = '/manage/data/request-language';

    axios.get(url)
        .then(({status, data}) => {
            if (status === 200) {
                data.records.forEach(item => {
                    let newData = {value: item.id, html: true, text: "<span :class='flag-icon flag-icon-" + item.name + " flag-icon-squared'></span>"};
                    this.columns[1].filterOptions.filterDropdownItems.push(newData);
                });
            }
        }).catch(error => Alert.handleRequestError(error));
},

我希望出现一个标志列表，而不是标志的跨度列表。

是否可以覆盖该特定过滤器或强制它使用 html 而不是纯文本？

4

0 回答 0