feat: table overflow

This commit is contained in:
Alisa | Side.one 2023-05-06 17:35:54 +08:00
parent ed43d109f0
commit b17d6fd6bf
4 changed files with 56 additions and 49 deletions

View File

@ -31,7 +31,7 @@ const format = useFormatter();
<table class="table w-full"> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th>Height</th> <th style="position: relative;">Height</th>
<th>Hash</th> <th>Hash</th>
<th>Proposer</th> <th>Proposer</th>
<th>Txs</th> <th>Txs</th>
@ -61,7 +61,7 @@ const format = useFormatter();
<table class="table w-full"> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th>Hash</th> <th style="position: relative;">Hash</th>
<th>Messages</th> <th>Messages</th>
<th>Fees</th> <th>Fees</th>
</tr> </tr>

View File

@ -293,15 +293,18 @@ const processList = computed(()=>{
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title">Votes</h2> <h2 class="card-title">Votes</h2>
<table class="table w-full "> <div class="overflow-x-auto">
<tbody> <table class="table w-full ">
<tr v-for="(item,index) of votes" :key="index"> <tbody>
<td>{{ item.voter }}</td> <tr v-for="(item,index) of votes" :key="index">
<td>{{ item.option }}</td> <td>{{ item.voter }}</td>
</tr> <td>{{ item.option }}</td>
</tbody> </tr>
</table> </tbody>
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn> </table>
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
</div>
</div> </div>
</div> </div>
</template> </template>

View File

@ -79,28 +79,30 @@ function color(v: string) {
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title">Channels </h2> <h2 class="card-title">Channels </h2>
<table class="table w-full mt-4"> <div class="overflow-x-auto"></div>
<thead> <table class="table w-full mt-4">
<tr><th>Channel Id</th> <thead>
<th>Port Id</th> <tr><th style="position: relative;">Channel Id</th>
<th>Counterparty</th> <th>Port Id</th>
<th>Hops</th> <th>Counterparty</th>
<th>Version</th> <th>Hops</th>
<th>Ordering</th> <th>Version</th>
<th>State</th></tr> <th>Ordering</th>
</thead> <th>State</th></tr>
<tbody> </thead>
<tr v-for="v in channels"> <tbody>
<td><a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{ v.channel_id }}</a></td> <tr v-for="v in channels">
<td>{{ v.port_id }}</td> <td><a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{ v.channel_id }}</a></td>
<td>{{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}</td> <td>{{ v.port_id }}</td>
<td>{{ v.connection_hops.join(", ") }} </td> <td>{{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}</td>
<td>{{ v.version }} </td> <td>{{ v.connection_hops.join(", ") }} </td>
<td>{{ v.ordering }}</td> <td>{{ v.version }} </td>
<td><VChip :color="color(v.state)">{{ v.state }}</VChip></td> <td>{{ v.ordering }}</td>
</tr> <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</template> </template>

View File

@ -23,22 +23,24 @@ function color(v: string) {
</script> </script>
<template> <template>
<div> <div>
<VCard> <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<VCardTitle>IBC Connections</VCardTitle> <h2 class="card-title">IBC Connections</h2>
<VTable> <div class="overflow-x-auto mt-4">
<thead> <table class="table w-full">
<tr><th>Connection Id</th><th>Connection</th><th>Delay Period</th><th>State</th></tr> <thead>
</thead> <tr><th style="position: relative;">Connection Id</th><th>Connection</th><th>Delay Period</th><th>State</th></tr>
<tbody> </thead>
<tr v-for="v in list"> <tbody>
<td><RouterLink :to="`/${chain}/ibc/${v.id}`">{{ v.id }}</RouterLink></td> <tr v-for="v in list">
<td>{{ v.client_id }} {{ v.id }} <br> {{v.counterparty.client_id }} {{ v.counterparty.connection_id }} </td> <td><RouterLink :to="`/${chain}/ibc/${v.id}`">{{ v.id }}</RouterLink></td>
<td>{{ v.delay_period }}</td> <td>{{ v.client_id }} {{ v.id }} <br> {{v.counterparty.client_id }} {{ v.counterparty.connection_id }} </td>
<td><VChip :color="color(v.state)">{{ v.state }}</VChip></td> <td>{{ v.delay_period }}</td>
</tr> <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
</tbody> </tr>
</VTable> </tbody>
</VCard> </table>
</div>
</div>
</div> </div>
</template> </template>