写一个类似antd表格的vue组件

好的，下面是一个简单的类似Antd表格的Vue组件的代码示例：

<template>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-for="column in columns" :key="column.key">{{ item[column.dataIndex] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "AntdTable",
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style>
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px 16px;
  text-align: left;
  border: 1px solid #ddd;
}
th {
  background-color: #f2f2f2;
}
</style>

这个组件可以接受两个props：columns和data。columns是一个数组，包含表格的列配置，每一项包含title和dataIndex两个属性；data是一个数组，包含表格的数据，每一项是一个对象，对象的属性名对应columns中的dataIndex。组件会根据这两个prop渲染出一个类似Antd表格的UI，支持横向滚动和单元格的排序等功能。