如何根据 Vue.js 2.6.11 和 Viutify 2.2.11 的条件更改 <v-data-table> 中列值的文本和颜色

Posted 2023-02-22

【中文标题】如何根据 Vue.js 2.6.11 和 Viutify 2.2.11 的条件更改 <v-data-table> 中列值的文本和颜色

【英文标题】：How to change text and color of a column value inside a <v-data-table> based on a condition with Vue.js 2.6.11 and Viutify 2.2.11

【发布时间】：2020-08-17 12:43:30

【问题描述】：

我正在使用 ASP.NET CORE 作为后端并使用 vue.js 作为前端来构建一个 Web 应用程序。将 Vuetify 当前的 CRUD Datatable UI 组件（与 Vue.js2 兼容）用于名为“Category”的页面，我遇到了尝试更改 Category 的“State”列值的问题（就像 Category 是“Active”一样或“非活动”）基于条件。数据表的结果如下所示：

|---------------------|------------------|---------------------|------------------|
|       Options       |       Name       |     Description     |      State       |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |    Videogames    |  Electronic Device  |       true       |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |      Tablets     |  Electronic Device  |       true       |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |   Flat Screens   |  Electronic Device  |       false      |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |      Laptop      |  Electronic Device  |       true       |
|---------------------|------------------|---------------------|------------------|

我想要实现的是设置一个条件，如果类别的状态为真，则将值替换为“活动”为蓝色文本。否则，它将值替换为“非活动”为红色文本。

|---------------------|------------------|---------------------|------------------|
|       Options       |       Name       |     Description     |      State       |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |    Videogames    |  Electronic Device  |      Active      |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |      Tablets     |  Electronic Device  |      Active      |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |   Flat Screens   |  Electronic Device  |     Inactive     |
|---------------------|------------------|---------------------|------------------|
|    Edit / Delete    |      Laptop      |  Electronic Device  |      Active      |
|---------------------|------------------|---------------------|------------------|

HTML：

<template>
<v-layout align-start>
    <v-flex>
        <v-data-table
        :headers="headers"
        :items="categories"
        :search="search"
        sort-by="name"
        class="elevation-1"
        >
        <template v-slot:top>
            <v-toolbar flat color="white">
            <v-toolbar-title>Categories</v-toolbar-title>
            <v-divider
                class="mx-4"
                inset
                vertical
            ></v-divider>
            <v-spacer></v-spacer>
            <v-text-field class="text-xs-center" v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
            <v-spacer></v-spacer>
            <v-dialog v-model="dialog" max->
                <template v-slot:activator=" on ">
                <v-btn color="primary" dark class="mb-2" v-on="on">New</v-btn>
                </template>
                <v-card>
                <v-card-title>
                    <span class="headline"> formTitle </span>
                </v-card-title>

                <v-card-text>
                    <v-container>
                    <v-row>
                        <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="name" label="Name"></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6" md="4">
                        <v-text-field v-model="description" label="Description"></v-text-field>
                        </v-col>
                    </v-row>
                    </v-container>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                    <v-btn color="blue darken-1" text @click="guardar">Save</v-btn>
                </v-card-actions>
                </v-card>
            </v-dialog>
            </v-toolbar>
        </template>
        <template v-slot:item.options=" item ">
            <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
            >
            edit
            </v-icon>
            <v-icon
            small
            @click="deleteItem(item)"
            >
            delete
            </v-icon>
        </template>
        <template v-slot:no-data>
            <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
        </v-data-table>
    </v-flex>
</v-layout>

JAVASCRIPT

<script>
import axios from 'axios'
export default 
    data()
        return

            categories:[],
            dialog: false,
            headers: [
                 text: 'Options', value: 'options', sortable: false ,
                 text: 'Name', value: 'name' ,
                 text: 'Description', value: 'description', sortable: false ,
                 text: 'State', value: 'state', sortable: false ,
            ],
            search: '',
            editedIndex: -1,
            id: '',
            name: '',
            description: '',
            valid: 0,
            validMessage: [],
        
    ,

    computed: 
        formTitle () 
        return this.editedIndex === -1 ? 'New Category' : 'Edit Category'
        ,
    ,

    watch: 
        dialog (val) 
        val || this.close()
        ,
    ,

    created () 
        this.list();
    ,

    methods:
        list()
            let me=this;
            axios.get("api/Categories/List").then(function(response)
                me.categories=response.data;
            ).catch(function(error)
                console.log(error);
            );

        ,

        editItem (item) 
            this.id=item.idcategory;
            this.name=item.name;
            this.description=item.descrition;
            this.editedIndex=1;
            this.dialog = true
        ,

        deleteItem (item) 
            const index = this.desserts.indexOf(item)
            confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
        ,

        close () 
            this.dialog = false;
            this.limpiar();
        ,

        clean() 
            this.id = "";
            this.name = "";
            this.description = "";
            this.editedIndex = -1;
        ,

        guardar () 
            if (this.validate())
                return;
            
            if (this.editedIndex > -1) 
                let me=this;
                axios.put('api/Categorias/Edit', 
                    'idcategory': me.id,
                    'name': me.nombre,
                    'description': me.description
                ).then(function(response)
                    me.close();
                    me.list();
                    me.clean();
                ).catch(function(error)
                    console.log(error);
                )
             else 
                let me=this;
                axios.post('api/Categories/Create', 
                    'name': me.name,
                    'description': me.description
                ).then(function(response)
                    me.close();
                    me.list();
                    me.clean();
                ).catch(function(error)
                    console.log(error);
                )
            
        ,

        validate () 
            this.valid=0;
            this.validMessage=[];
            if(this.name.length < 3 || this.name.length > 50)
                this.validMessage.push("The name should be in between 3 and 50 characters.")
            
            if(this.valid.length)
                this.valid=1;
            
            return this.valid;
        ,

    

任何建议将不胜感激！

【问题讨论】：

这能回答你的问题吗？ How to format Vuetify data table date column?

【参考方案1】：

使用item.state 插槽，您可以实现：

<template v-slot:item.state=" item ">
item.state? ... : ...
</template>

【讨论】：

这正是我想要的！您的解决方案比我想象的要简单。我仍在尝试做的唯一一件事是根据条件更改包含值的模板标签的颜色（如果它处于活动状态）。

【参考方案2】：

听起来你只需要一个在颜色变化位置上的动态类：

:class="active? 'text--primary' : 'text--red'" 。

https://v15.vuetifyjs.com/en/framework/colors

【讨论】：

不幸的是，这行不通，因为我已经应用了 Varun A 的建议，该建议可以根据需要更改值，但仍在实施 :class="active? 'text--primary' ： 'text--red'" 在同一个