vue组件使用数据表格

Vue中的数据表格可以使用第三方组件库，例如Element UI、Vuetify等。这些组件库中都有现成的数据表格组件，可以直接拿来使用。

以Element UI为例，它的数据表格组件是el-table。使用方法如下：

1. 安装Element UI：可以使用npm或者yarn进行安装，具体可参考Element UI官方文档。

2. 在Vue组件中引入el-table：

<template>
  <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>
</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: '广州市' },
        { date: '2021-01-04', name: '赵六', address: '深圳市' },
      ],
    };
  },
};
</script>

在上面的代码中，el-table通过:data属性绑定了tableData数组，每个el-table-column代表表格中的一列，通过prop属性指定列的数据源，通过label属性指定列的标题。

3. 在Vue组件中引入Element UI：

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  // ...
  mounted() {
    this.$nextTick(() => {
      Vue.use(ElementUI);
    });
  },
  // ...
};
</script>

在上面的代码中，我们在Vue组件的mounted()方法中引入了Element UI，并在Vue实例中注册了Element UI插件，这样就可以使用Element UI提供的所有组件了。

以上是一个简单的Vue数据表格的使用示例，希望对您有所帮助。