antd vue <s-table>使用

antd vue 的 `<s-table>` 是一个非常方便的表格组件，可以实现各种复杂的表格展示和操作。下面是一个简单的使用示例： ```vue <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>` 来定义一个列的自定义渲染，这个列会显示操作按钮，点击按钮后会触发相应的方法。