Ant Design Vue 表格自定义列示例

本示例演示如何使用 Ant Design Vue 中的表格组件，并实现自定义列功能。用户可以根据需求灵活选择显示的列，提高表格的定制性。

// 引入Ant Design Vue组件
import { Table, Button, Modal } from 'ant-design-vue';

export default {
  data() {
    return {
      // 原始表格数据
      dataSource: [...],
      // 表格列定义
      columns: [
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '年龄', dataIndex: 'age', key: 'age' },
        { title: '地址', dataIndex: 'address', key: 'address' },
        // 其他列...
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
      ],
    };
  },
  methods: {
    // 显示自定义列弹窗
    showCustomColumnsModal() {
      Modal.confirm({
        title: '选择显示的列',
        content: (
          <div>
            {this.columns.map(column => (
              <Checkbox v-model={column.checked}>{column.title}</Checkbox>
            ))}
          </div>
        ),
        onOk: () => {
          // 更新表格列定义
          this.columns = this.columns.filter(column => column.checked);
        },
      });
    },
  },
  render() {
    return (
      <div>
        <Button onClick={this.showCustomColumnsModal}>自定义列</Button>
        <Table :columns="columns" :dataSource="dataSource" />
      </div>
    );
  },
};

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com