不通过UI组件库实现vue脚手架点击显示表格
时间: 2023-05-27 08:03:29 浏览: 113
详解vue-cli+element-ui树形表格(多级表格折腾小计)
要实现点击显示表格,需要以下步骤:
1. 创建一个 Vue 实例,并引入 Vue 和 Vue Router 包。
2. 在 Vue 实例中定义一个数据变量,用于存储表格显示和隐藏状态。
3. 创建一个路由配置对象,定义两个路由,一个是显示表格的路由,一个是默认路由。
4. 在 App.vue 中创建一个组件,用于显示表格。
5. 在导航栏中添加一个点击事件处理函数,用于切换显示和隐藏表格。
实现示例代码:
index.html:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="./main.js"></script>
</body>
</html>
```
main.js:
```
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/table', component: Table },
{ path: '/', redirect: '/table' }
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
```
App.vue:
```
<template>
<div>
<nav>
<ul>
<li>
<router-link to="/table" @click="showTable = !showTable">Table</router-link>
</li>
</ul>
</nav>
<div v-if="showTable">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
<router-view></router-view>
</div>
</template>
<script>
import Table from './Table.vue'
export default {
components: { Table },
data() {
return {
showTable: false
}
}
}
</script>
```
Table.vue:
```
<template>
<div>
This is the Table component.
</div>
</template>
<script>
export default {}
</script>
```
阅读全文