Добавить активный класс столбец в таблицу (как в netflix) - PullRequest
Новая
       14

Добавить активный класс столбец в таблицу (как в netflix)

2 голосов
/ 17 апреля 2019

Мне нужна помощь, чтобы выбрать заголовок таблицы и выбрать столбец с помощью классов. Как в Netflix. Я нуб в VueJS

Пример GIF

Мой код 

    <table class="table">
        <thead class="text-center">
            <tr>
                <th scope="col"><button type="button" class="btn plan_columnA selected" @click="planSelect('plan_columnA')">Column A</button></th>
                <th scope="col"><button type="button" class="btn plan_columnB" @click="planSelect('plan_columnB')">Column B</button></th>
                <th scope="col"><button type="button" class="btn plan_columnC" @click="planSelect('plan_columnC')">Column C</button></th>
            </tr>
        </thead>

        <tbody class="text-center">
            <tr>
                <td class="plan_columnA selected">Mark</td>
                <td class="plan_columnB">Otto</td>
                <td class="plan_columnC">@mdo</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Jacob</td>
                <td class="plan_columnB">Thornton</td>
                <td class="plan_columnC">@fat</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Larry</td>
                <td class="plan_columnB">the Bird</td>
                <td class="plan_columnC">@twitter</td>
            </tr>
        </tbody>
    </table>

Мой стиль 

.btn {
    background-color: darkgrey;
    color: white;
}
button.selected {
    background-color: red;
}
td.selected {
    color: red;
}

Я пытаюсь это сделать, но я не знаю, правильно ли это 

export default {
    data () {
        return {
            planSelected: '',
        }
    },

    methods: {
        planSelect (plan) {
            this.planSelected = plan;

            $('.selected').removeClass('selected');
            $('.' + this.planSelected).addClass('selected');
        },
    },
}

Я пробовал JQuery, но я хочу сделать это в VueJS.

Спасибо!

1 Ответ

0 голосов
/ 17 апреля 2019

Это довольно просто, я сделал для вас пример на скрипке, надеюсь, он поможет вам в пути. Это должно быть сделано более динамично, для лучшего обзора, но вы можете поиграть с кодом, который я сделал.

В идеальном сценарии вы бы сгенерировали все строки / столбцы из переменной данных вместо того, чтобы делать все это вручную.

https://jsfiddle.net/6aojqm0k/

Я сделал только одну переменную данных, которую вы устанавливаете и проверяете на разных тдс и кнопках. 

data: () => ({
    planSelected: 'plan_columnA'
})

Кнопка выбора плана: 

<button type="button" class="btn plan_columnA" :class="{selected: planSelected === 'plan_columnA' }" @click="planSelected = 'plan_columnA'">Column A</button>

А фактический столбец для отображения выбран 

<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>

Совет для профессионалов: никогда не комбинируйте jQuery и VueJS - просто используйте VueJS

...