ant-design-vue

Button

The Button component is a basic UI element that can be used to trigger actions. It supports various types, such as primary, default, dashed, and danger.

<template>
  <a-button type="primary">Primary Button</a-button>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
  components: {
    'a-button': Button
  }
};
</script>

Form

The Form component is used to create and manage forms. It provides validation, layout, and submission handling features.

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="Username">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item label="Password">
      <a-input type="password" v-model="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { Form, Input, Button } from 'ant-design-vue';
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'login_form' })
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values: ', values);
        }
      });
    }
  },
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button
  }
};
</script>

Table

The Table component is used to display data in a tabular format. It supports features like sorting, filtering, and pagination.

<template>
  <a-table :columns="columns" :dataSource="data" />
</template>
<script>
import { Table } from 'ant-design-vue';
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' }
      ],
      data: [
        { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }
      ]
    };
  },
  components: {
    'a-table': Table
  }
};
</script>