Question

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

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

选项（语言列表（例如：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而不是纯文本？

Vue优良表组件，在过滤器选择选项中插入html

0 个答案: