element-plus

Form Components

Element Plus provides a variety of form components such as input fields, buttons, and form containers. This example demonstrates a simple login form with username and password fields.

<template>
  <el-form :model="form">
    <el-form-item label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form submitted:', this.form);
    }
  }
};
</script>

Data Display

Element Plus offers data display components like tables, which can be used to present data in a structured format. This example shows a simple table with columns for date, name, and address.

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'John Smith', address: 'No. 1, Lake Park' },
        { date: '2016-05-04', name: 'Jane Doe', address: 'No. 2, Lake Park' }
      ]
    };
  }
};
</script>

Navigation

Element Plus includes navigation components such as menus, which can be used to create navigational structures for your application. This example demonstrates a horizontal menu with three items.

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">Home</el-menu-item>
    <el-menu-item index="2">About</el-menu-item>
    <el-menu-item index="3">Contact</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('Selected menu item:', key);
    }
  }
};
</script>