vue脚手架点击显示表格

在使用Vue脚手架时，可以通过安装相应的UI组件库来快速实现表格的显示与交互。以Element UI为例，具体步骤如下：

1. 安装Element UI

在命令行中输入以下命令安装Element UI：

npm install element-ui -S

2. 引入Element UI

在Vue项目的入口文件main.js中引入Element UI：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

3. 创建表格组件

在Vue项目中，可以创建一个单独的组件来显示表格，例如创建一个名为Table.vue的文件，其中包含以下代码:

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 40, gender: '男' },
        { name: '赵六', age: 50, gender: '女' }
      ]
    }
  }
}
</script>

在tableData中维护待显示的数据源，可以通过后台接口获取或直接硬编码在组件中。

4. 在父组件中引入表格组件

在需要显示表格的父组件中引入表格组件：

<template>
  <div>
    <el-button type="primary" @click="showTable = true">显示表格</el-button>
    <div v-if="showTable">
      <Table></Table>
    </div>
  </div>
</template>

<script>
import Table from './Table.vue';
export default {
  data() {
    return {
      showTable: false
    }
  },
  components: {
    Table
  }
}
</script>

在这个示例中，通过一个按钮来控制表格的显示与隐藏，点击按钮后设置showTable为true，然后通过v-if指令来判断是否渲染表格。在组件注册时需要将Table组件注册为子组件。