Добрый вечер.
Есть таблица, в которой отображаются заказы и есть поле статуса.
По клику на строку (в любом месте) таблица раскрывается.
Но есть проблема:
Нужна опция изменения статуса заказа.
Но при клике на select открывается/закрывается вся таблица.
Вопрос: Как пофиксить, чтобы при клике на select открывался только он, и можно было выбрать другой статус?
<div class="table-body">
<div v-if="worker != undefined" v-for="worker in mainData.workers" class="card">
<div class="card-header" data-toggle="collapse" :data-target="'#'+'collapseWorker'+worker.id" aria-expanded="true" :aria-controls="'collapseWorker'+worker.id" :id="'headingWorker'+worker.id">
<div class="table-cell stracuna" v-tooltip.right="msgDescription"> #0{{worker.id}}-000{{worker.id}}-2018</div>
<div class="table-cell podjetje"> HiGroup d.o.o</div>
<div class="table-cell znesek"> 2.999,00€</div>
<!--<div class="table-cell rokplacila"> 29.09.18</div>-->
<div class="table-cell izvoz">
<i class="fas fa-file-excel" v-tooltip.right="msgExportDataExcel"></i>
<i class="fas fa-file-pdf" v-tooltip.right="msgExportDataPdf"></i>
</div>
<div class="table-cell bills-status">
<select name="" id="bills-status" >
<option value="" selected> Izberi status </option>
<option value="poslano"> Poslano </option>
<option value="placano"> Plačano </option>
<option value="opomin"> Opomin </option>
</select>
</div>
</div>
<div :id="'collapseWorker'+worker.id" class="collapse" :aria-labelledby="'headingWorker'+worker.id" data-parent="#accordionBills">
<div class="card-body">
<div class="content-bills">
<div class="bills-info">
<div class="bills-statistics">
<div class="col"> Vseh voženj: 55</div>
<div class="col"> Zdnja vožnja: 23€</div>
<div class="col"> Odpelanih oseb: 76</div>
</div>
<div class="table-bills-drives table-all">
<div class="table-body">
<div class="card">
<div class="card-header">
<div class="table-cell drives-status"><i class="fal fa-check" v-tooltip.right="msgStatus"></i></div>
<div class="table-cell drives-datum"><i class="fal fa-calendar-alt" v-tooltip.right="msgDrivesDate"></i></div>
<div class="table-cell drives-vstop" v-tooltip.bottom-end="msgStartLocation">Dunajska cesta 196, Ljubljana</div>
<div class="table-cell drives-izstop" v-tooltip.bottom-end="msgEndLocation"><i class="fas fa-plane-departure"></i> | Airport Ljubljana-(LJU), Spodnji Brnik 30</div>
<div class="table-cell drives-stranka"> Mateja Pušnik</div>
<div class="table-cell drives-voznik"> <span class="badge badge-dark" v-tooltip.bottom-end="msgInterna">70</span>Pawlek</div>
<div class="table-cell drives-edit"> <a href="#" v-tooltip.right="msgDrivesEdit"><i class=" btn btn-outline-dark fas fa-pencil-alt"></i></a></div>
</div>
</div>
<!-- .card -->
</div>
<!-- .table-body -->
</div>
<!-- .table-drives-->
</div>
</div>
</div>
</div>
</div>
</div>
Пробовал через css задать z-index select выше .card-header, но не получилось(((
Простой