antd vue <s-table>使用

antd vue 的 `<s-table>` 是一个非常方便的表格组件，可以实现各种复杂的表格展示和操作。下面是一个简单的使用示例：

<template>
  <div>
    <a-button type="primary" @click="handleAdd">添加</a-button>
    <a-table :columns="columns" :data-source="dataSource" row-key="id">
      <template v-slot:action="record">
        <span>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script>
import { Table, Button, Divider } from 'ant-design-vue';

export default {
  name: 'MyTable',
  components: {
    'a-table': Table,
    'a-button': Button,
    'a-divider': Divider,
  },
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
        { title: '地址', dataIndex: 'address' },
        {
          title: '操作',
          dataIndex: '',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [
        { id: 1, name: '张三', age: 18, address: '上海市' },
        { id: 2, name: '李四', age: 22, address: '北京市' },
        { id: 3, name: '王五', age: 26, address: '广州市' },
      ],
    };
  },
  methods: {
    handleAdd() {
      // 添加逻辑
    },
    handleEdit(record) {
      // 编辑逻辑
    },
    handleDelete(record) {
      // 删除逻辑
    },
  },
};
</script>

在上面的代码中，我们使用了 `<a-table>` 组件来展示表格，它接收三个必要的 props：

- `columns`：表头数据，是一个数组，每个元素都是一个对象，包含 `title` 和 `dataIndex` 两个属性，分别表示列的标题和数据源的字段名。
- `data-source`：表格数据，是一个数组，每个元素都是一条数据。
- `row-key`：每行数据的唯一标识符，可以是数据源的某个字段名，也可以是一个自定义函数。

同时，我们还使用了 `<template v-slot:action>` 来定义一个列的自定义渲染，这个列会显示操作按钮，点击按钮后会触发相应的方法。