q-table's expan drow collapse or uncollapse simultaneously(Solved)



  • here is my html

    <q-table
            color="primary"
            flat
            bordered
            separator="cell"
            :data="data"
            :columns="columns"
            :pagination.sync="pagination"
          >
    
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="result" :props="props">{{ props.row.result }}</q-td>
                <q-td key="test_name" :props="props">{{ props.row.test_name }}</q-td>
                <q-td key="failed_info" class="col-overflow">
                  <q-btn
                    dense
                    round
                    flat
                    :icon="props.expand ? 'arrow_drop_up' : 'arrow_drop_down'"
                    @click="props.expand = !props.expand"
                  />
                  {{props.row.failed_info}}
                  </a>
                </q-td>
                <q-td key="time_cost" :props="props">{{ props.row.time_cost }}</q-td>
                <q-td key="timeout" :props="props">{{ props.row.timeout }}</q-td>
                <q-td key="owner" :props="props">{{ props.row.owner }}</q-td>
                <q-td key="description" :props="props">{{ props.row.description }}</q-td>
              </q-tr>
              <q-tr v-show="props.expand" :props="props">
                <q-td            
                  colspan="100%"
                  style="white-space:pre-wrap; word-wrap:break-word"
                >
                  <div class="text-left">{{ props.row.failed_info }}</div>
                </q-td>
              </q-tr>
            </template>
    
          </q-table>
    

    0e7b9e83-37fb-4067-8267-125b63477df0-image.png



  • If I click button for “aaaa”, then button of “bar” collapses or uncollapses at the same time.

    No idea what happened



  • @guying you didnt set your qtable’s row-key prop. https://quasar.dev/vue-components/table#Expanding-rows



  • @metalsadman great thanks, it worked!!


Log in to reply