Установите все флажки на один флажок в Vue - PullRequest
Новая
       14

Установите все флажки на один флажок в Vue

0 голосов
/ 04 февраля 2020

Я использую Bootstrap vue. И я пытаюсь проверить все флажки в моей б-таблице на одном флажке. Мои чекбоксы находятся в b-таблице в теге внутри слота с именем «selected». 

<b-table id="myTabel"
            head-variant="light"
            :items="items"
            :fields="fields">
            <template slot="selected" slot-scope="row">
               <b-form-group>
                  <b-form-checkbox-group id="checkbox-group-2" v-model="selected">
                     <b-form-checkbox :value="row.item.mctname"/>
                  </b-form-checkbox-group>
               </b-form-group>
            </template>
</b-table>

Это мой флажок «Проверить все» 

<b-form-checkbox v-model="allSelected">
    {{ allSelected ? 'Uncheck All' : 'Check All' }}         
</b-form-checkbox>

И это мой код сценария 

<script>
    export default{
       data: () => {
          return {
             selected:'',
             items:[],
             allSelected: false,
             fields:{
                   mid: {
                   label: "MID",
                   mid: "MID",
                },
                   mctname: {
                   label: "Name",
                   sortable: true,
                },
                   status:{
                   label: "Status"
                },                 
             },
    }
</script>

Я использую топор ios для данные моей таблицы 

    loadTable: function() {
    this.loading = true;
    axios
        .get(baseUrl + ".../get_all_items")
        .then(response => {
        this.items = JSON.parse(response.request.responseText);
        this.loading = false;
        this.totalRows = this.items.length;

        })
        .catch(function(error) {
        console.log(error);
        this.loading = false;
        });
    },

Как выбрать все флажки и снять все флажки, нажав на флажок «Отметить все», который находится в верхней части таблицы? И после того, как все флажки установлены, он вернет все данные "mctname".

1 Ответ

0 голосов
/ 05 февраля 2020

Вы можете добавить watch hook: 

watch: {
    allSelected: {
        immediate: true,
        handler: function(val) {
            if (val) {
                this.selectAll = true;
                this.returnData();
            } else {
                this.selectAll = false;
            }
        }
    }
}

, а затем сделать все флажки зависимыми от selectAll

...