반응형
v-switch 또는 확인란을 클릭하면 Vuejs가 클릭한 행을 다른 테이블로 이동합니다.
두 번째 테이블의 행은 클릭하면 첫 번째 테이블로 이동합니다.v-switch그리고 또한 첫 번째 테이블의 행은 두 번째 테이블로 이동해야 합니다.v-switch를 클릭합니다.저는 어떤 접근법을 사용해야 할지 고민하고 있습니다.
<template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr class="ma-0 pa-0">
<th>Available Items</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="ma-0 pa-0">
<td>Item-005</td>
<td>
<v-switch v-model="switch1" inset label="Available"></v-switch>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-simple-table>
<template v-slot:default>
<thead>
<tr class="ma-0 pa-0">
<th>UnAvailable Items</th>
<th>Action</th>
</tr>
</thead>
<p>UnAvailable Items</p>
<tbody>
<tr class="ma-0 pa-0">
<td>Item-125</td>
<td>
<v-switch v-model="switch2" inset label="Unavailable"></v-switch>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
export default {
data(){
return {
switch1: false,
switch2: false,
}
}
};
</script>
다음 스니펫을 확인하십시오.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return {
items: [{id: 1, name: "aaa", availabile: true}, {id: 2, name: "bbb", availabile: false}, {id: 3, name: "ccc", availabile: false}, {id: 4, name: "ddd", availabile: true}, {id: 5, name: "eee", availabile: true}]
}
}
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-simple-table>
<template v-slot:default>
<thead>
<tr class="ma-0 pa-0">
<th>Available Items</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="ma-0 pa-0" v-for="item in items" :key="item.id">
<td v-if="item.availabile">{{ item.name }}</td>
<td v-if="item.availabile">
<v-switch v-model="item.availabile" inset label="Available"></v-switch>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-simple-table>
<template v-slot:default>
<thead>
<tr class="ma-0 pa-0">
<th>UnAvailable Items</th>
<th>Action</th>
</tr>
</thead>
<p>UnAvailable Items</p>
<tbody>
<tr class="ma-0 pa-0" v-for="item in items" :key="item.id">
<td v-if="!item.availabile">{{ item.name }}</td>
<td v-if="!item.availabile">
<v-switch v-model="item.availabile" inset label="Unavailable"></v-switch>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>언급URL : https://stackoverflow.com/questions/71856790/vuejs-move-clicked-row-to-another-table-on-click-of-v-switch-or-checkbox
반응형
'programing' 카테고리의 다른 글
| 목록에서 모든 복제본을 찾는 방법은 무엇입니까? (0) | 2023.07.09 |
|---|---|
| Mongodb 배경 인덱스 - 한 번 생성된 배경 인덱스가 여전히 있습니까? (0) | 2023.07.09 |
| 세 개의 테이블을 안쪽 접합 (0) | 2023.07.09 |
| EXISS 대 ISISS 절의 가입 및 사용 (0) | 2023.07.09 |
| C에서 배열의 길이를 구하는 방법은 무엇입니까?"크기"가 해결책입니까? (0) | 2023.07.09 |