它应该是显示显示，基于复选框显示隐藏单击它不起作用。谁能帮忙看看哪里错了？
一旦我们单击 ID，它应该隐藏 ID 列，如果我们首先单击它应该隐藏/显示基于复选框单击等，并触发复选框事件。
<html>
<head>
<title>VueJs Demo Example</title>
<script src="https://unpkg.com/vue@3"></script>
</script>
</head>
<body>
<h1 id="app">{{ message }}
<div v-for="field in fields">
<input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
<label>{{field.label}}</label>
</div>
<tr>
<th> ID </th>
<th>first</th>
<th>last</th>
<th>age</th>
</tr>
<div v-for="item in items" :fields="visibleFields">
<table>
<tr>
<td>{{item.id}}</td>
<td>{{item.first}}</td>
<td>{{item.last}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</h1>
<script>
const {
createApp
} = Vue
createApp({
data() {
return {
items: [{
id: 1,
first: 'Mike',
last: 'Kristensen',
age: 16
}, {
id: 2,
first: 'Peter',
last: 'Madsen',
age: 52
}, {
id: 3,
first: 'Mads',
last: 'Mikkelsen',
age: 76
}, {
id: 4,
first: 'Mikkel',
last: 'Hansen',
age: 34
}, ],
fields: [{
key: 'id',
label: 'ID',
visible: true
}, {
key: 'first',
label: 'First Name',
visible: true
}, {
key: 'last',
label: 'Last Name',
visible: true
}, {
key: 'age',
label: 'Age',
visible: true
}, ]
}
},
computed: {
visibleFields() {
return this.fields.filter(field => field.visible)
}
},
}).mount('#app')
</script>
</body>
</html>
我希望一切都清楚，如果需要澄清，请写信。
提前致谢
请查看以下代码片段（您可以使用 v-if 和返回列是否可见的方法）：
const app = Vue.createApp({
data() {
return {
items: [{id: 1, first: 'Mike', last: 'Kristensen', age: 16}, {id: 2, first: 'Peter', last: 'Madsen', age: 52}, {id: 3, first: 'Mads', last: 'Mikkelsen', age: 76}, {id: 4, first: 'Mikkel', last: 'Hansen', age: 34}, ],
fields: [{key: 'id', label: 'ID', visible: true}, {key: 'first', label: 'First Name', visible: true}, {key: 'last', label: 'Last Name', visible: true}, {key: 'age', label: 'Age', visible: true}, ]
}
},
computed: {
visibleFields() {
return this.fields.filter(field => field.visible)
}
},
methods: {
isVisible(id) {
return this.visibleFields.find(v => v.key === id)
},
},
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(field, i) in fields" :key="i">
<input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
<label>{{ field.label }}</label>
</div>
<table>
<tr>
<th v-for="(field, i) in fields" :key="i">
<label v-if="isVisible(field.key)">{{ field.label }}</label>
</th>
</tr>
<tr v-for="(item, i) in items" :key="i">
<td v-for="(itm, key, i) in item" :key="i">
<div v-if="isVisible(key)">{{ itm }}</div>
</td>
</tr>
</table>
</div>你能帮我吗？ 我如何在 vue 3 的脚本设置中使用它？
谢谢你