vue3 封装table

Vue3 中封装表格组件可以使用 composition API，以下是一个简单的例子：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.field">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="col in columns" :key="col.field">{{ row[col.field] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { reactive } from 'vue'

export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const state = reactive({
      columns: props.columns,
      rows: props.rows
    })

    return {
      columns: state.columns,
      rows: state.rows
    }
  }
}
</script>

这个例子中，我们使用了 `reactive` 函数来创建一个响应式对象 `state`，然后将传入的 `columns` 和 `rows` 赋值给 `state.columns` 和 `state.rows`。最后，我们将 `state.columns` 和 `state.rows` 作为组件的返回值，这样父组件就可以使用这两个变量来渲染表格。

在模板中，我们遍历 `columns` 和 `rows` 来渲染表头和表格内容。需要注意的是，在遍历 `rows` 的时候，我们使用 `v-for="(row, index) in rows"` 来获取每一行的数据，并使用 `:key="index"` 来指定每一行的唯一标识。在遍历 `columns` 的时候，我们使用 `v-for="col in columns"` 来获取每一列的数据，并使用 `:key="col.field"` 来指定每一列的唯一标识。

这只是一个简单的例子，你可以根据自己的需求来修改和扩展这个组件。