Table 表格

姓名	年龄	电话	操作
张三1	25	1380013800	删除
张三2	26	1380013801	编辑
张三3	27	1380013802	删除

姓名	年龄	电话	操作
张三1	25	1380013800	删除
张三2	26	1380013801	编辑
张三3	27	1380013802	删除

基础使用

这是 Table 的基础例子

<script setup lang="ts">
import { ref } from 'vue'

const columns = ref([
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' },
  { title: '电话', key: 'phone' },
  { title: '操作', key: 'action' },
])

const data = ref(Array.from({ length: 3 }).map((_, index) => ({
  name: `张三${index + 1}`,
  age: 25 + index,
  phone: 1380013800 + index,
  action: index % 2 === 0 ? '删除' : '编辑',
})))
</script>

<template>
  <div class="table-demo">
    <NpTable :data="data" :columns="columns" />
  </div>
  <div class="table-demo">
    <np-table :data="data">
      <np-table-column key="name" title="姓名" />
      <np-table-column key="age" title="年龄" />
      <np-table-column key="phone" title="电话" />
      <np-table-column key="action" title="操作" />
    </np-table>
  </div>
</template>