vue制作表格

要制作表格，可以使用Vue.js配合一些UI框架，例如Element UI或Vuetify等。

下面是一个使用Element UI的示例：

1. 首先，安装Element UI：

npm install element-ui --save

2. 在Vue项目中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建一个包含表格的组件：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2021-01-01',
          name: '张三',
          address: '北京市'
        }, {
          date: '2021-01-02',
          name: '李四',
          address: '上海市'
        }, {
          date: '2021-01-03',
          name: '王五',
          address: '广州市'
        }]
      };
    }
  };
</script>

在这个示例中，我们使用了`el-table`和`el-table-column`两个Element UI组件来创建表格，并且使用了一个数组`tableData`来存储表格数据。`prop`属性用于指定表格列对应的数据属性，`label`属性用于指定表格列的标题。

4. 在需要显示表格的页面中使用该组件：

<template>
  <div>
    <my-table></my-table>
  </div>
</template>

<script>
  import MyTable from './MyTable.vue';

  export default {
    components: {
      MyTable
    }
  };
</script>

这样，就可以在页面中显示该表格组件了。

当然，这只是一个简单的示例，实际应用中可能需要更多的功能和样式调整。你可以根据自己的需求进行修改和扩展。