2

Muy buenas tardes, comunidad, Necesito que me ayuden con un dilema que tengo, Tengo una tabla alimentada con datos mediante Vuejs, en la cual he ingresado una columna la cual contiene un Checkbox, Lo que quiero es que cada vez que seleccione el check se me pinta la fila seleccionada y si desmarco por ende la despintaría.

Gracias espero prontas respuestas.

                                <tr v-for="lst_comensal of lista_comensal">
                                <!--<tr v-for="lst_comensal of lista_comensal" v-bind:class="check_cell==true? 'bg-danger':''" >-->
                                <!--<tr v-for="lst_comensal of lista_comensal" v-bind:class="check_cell==true? 'bg-danger':''" @click="check_cell = !check_cell">-->
                                    
                                    <td>{{lst_comensal.cat_comensales_ci}}</td>                                      
                                    
                                    <td>{{lst_comensal.cat_comensales_apellidos}}</td>
                                    <td>{{lst_comensal.cat_comensales_nombres}}</td>
                                    <td>{{lst_comensal.nombres}}</td>
                                    <td>{{lst_comensal.dep_nombre}}</td>
                                    <td>{{lst_comensal.name_proyect}}</td>
                                    <td v-if="(lst_comensal.cat_estado==1)">
                                        <input @click='toggle' type="checkbox" tu-attr-precio="1" class="materialUnchecked" name="checkbox_d[]" id="materialUnchecked" v-bind:value="lst_comensal.cat_comensales_ci">
                                    </td>
                                    <td v-else> <span class="label label-danger ">Inactivado</span></td>
                                </tr>

                            </tbody>

1 respuesta 1

0
<link
    href="https://unpkg.com/spectre.css/dist/spectre.min.css"
    type="text/css"
    rel="stylesheet"
/>

<div id="app">
    <div class="text-uppercase text-bold">id selected: {{selected}}</div>
     <div class="text-uppercase text-bold">Cantidad: {{selected.length}}</div>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>
                    <label class="form-checkbox"
                        ><input
                            type="checkbox"
                            v-model="selectAll"
                            @click="select" /><i class="form-icon"></i
                    ></label>
                </th>
                <th>id</th>
                <th>name</th>
                <th>email</th>
            </tr>
        </thead>
        <tbody>
            <tr
                v-for="(i,index) in items"
                v-on:click="seletedRow(i.id)"
                @key="i.id"
                :class="i.id"
            >
                <td>
                    <label class="form-checkbox"
                        ><input
                            type="checkbox"
                            :value="i.id"
                            v-model="selected" /><i class="form-icon"></i
                    ></label>
                </td>
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.email}}</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: () => ({
            items: [
                {
                    id: "id1",
                    name: "John Doe",
                    email: "email@example.com",
                },
                {
                    id: "id2",
                    name: "Jone Doe",
                    email: "email2@example.com",
                },
                {
                    id: "id3",
                    name: "Jone Doe",
                    email: "email2@example.com",
                },
                {
                    id: "id4",
                    name: "Jone Doe",
                    email: "email2@example.com",
                },
            ],
            selected: [],
            selectedUser: null,
            selectAll: false,
        }),
        methods: {
            select() {
                console.log(".....");
                this.selected = [];
                if (!this.selectAll) {
                    for (let i in this.items) {
                        this.selected.push(this.items[i].id);
                        document.getElementsByClassName(
                            this.items[i].id
                        )[0].style.background = "red";
                    }
                } else {
                    for (let i in this.items) {
                        this.selected = [];
                        document.getElementsByClassName(
                            this.items[i].id
                        )[0].style.background = "transparent";
                    }
                }
            },
            seletedRow(user) {
                event.preventDefault();
                let existe = this.selected.includes(user);
                if (existe) {
                    var i = this.selected.indexOf(user);
                    if (i !== -1) {
                        this.selected.splice(i, 1);
                        document.getElementsByClassName(
                            user
                        )[0].style.background = "transparent";
                    }
                } else {
                    this.selected.push(user);
                }

                for (let i of this.selected) {
                    document.getElementsByClassName(i)[0].style.background =
                        "red";
                }
            },
        },
    });
</script>

 - Elemento de lista

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.