Element UI: Dialogs, Layout & Feedback Components

Dialogs (Modals)

<el-dialog title="Edit User" :visible.sync="dialogVisible">
  <el-form :model="editForm">...</el-form>
  <span slot="footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="save">Save</el-button>
  </span>
</el-dialog>

<!-- .sync is Vue 2's shorthand for two-way prop binding: the dialog's
     own close button (X icon) emits update:visible, automatically
     syncing dialogVisible back to false in the parent -- no manual
     event listener needed. -->

Grid Layout

<!-- 24-column responsive grid, similar to Bootstrap's grid system -->
<el-row :gutter="20">
  <el-col :span="12" :xs="24" :sm="12">Left panel</el-col>
  <el-col :span="12" :xs="24" :sm="12">Right panel</el-col>
</el-row>

<el-tabs v-model="activeTab">
  <el-tab-pane label="Profile" name="profile">...</el-tab-pane>
  <el-tab-pane label="Settings" name="settings">...</el-tab-pane>
</el-tabs>

Transient Feedback: $message

// Triggered imperatively from anywhere -- no template placement,
// no manual show/hide state needed
this.$message.success('Saved!');
this.$message.error('Something went wrong');

this.$notify({
  title: 'New comment',
  message: 'Someone replied to your post',
  type: 'info',
});

// Confirmation dialog (this one DOES trigger a native-feeling
// blocking flow -- typically used before a destructive action)
this.$confirm('Delete this item?', 'Warning', { type: 'warning' })
  .then(() => deleteItem())
  .catch(() => {});

Theming & Sizing

// element-variables.scss -- override design tokens before compiling
// the library's styles, instead of fighting default CSS with overrides
$--color-primary: #409EFF;
$--font-size-base: 14px;

@import '~element-ui/packages/theme-chalk/src/index';

• Consistent size prop (default/medium/small/mini) across form components -- dense forms use a smaller size without hand-written CSS.

• el- prefix on every component tag distinguishes them from plain HTML/other libraries.

• Best fit: CRUD-heavy admin panels/internal tools needing tables, forms, and dialogs quickly out of the box.