Element UI 与 Ant Design 速查

# 用 npm 安装
npm install element-plus

# 用 pnpm 安装（推荐，更快）
pnpm add element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

pnpm add -D unplugin-vue-components unplugin-auto-import

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({ resolvers: [ElementPlusResolver()] }),
    Components({ resolvers: [ElementPlusResolver()] }),
  ],
})

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button>默认按钮</el-button>

<!-- 带图标的按钮 -->
<el-button type="primary" :icon="Search">搜索</el-button>
<el-button type="primary" :icon="Plus">新增</el-button>

<!-- 基础输入框 -->
<el-input v-model="form.name" placeholder="请输入设备名称" />

<!-- 带搜索图标的输入框 -->
<el-input v-model="search" placeholder="搜索..." :prefix-icon="Search" />

<!-- 可清空的输入框 -->
<el-input v-model="keyword" clearable />

<!-- 文本域 -->
<el-input v-model="remark" type="textarea" :rows="3" />

<el-select v-model="form.status" placeholder="请选择状态">
  <el-option label="运行中" value="running" />
  <el-option label="停机" value="stopped" />
  <el-option label="维修中" value="maintenance" />
</el-select>

<!-- 选择日期 -->
<el-date-picker
  v-model="form.date"
  type="date"
  placeholder="选择日期"
/>

<!-- 选择日期范围（常用：查询某段时间的数据） -->
<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>

<el-table :data="tableData" stripe border>
  <el-table-column prop="id" label="设备ID" width="80" />
  <el-table-column prop="name" label="设备名称" />
  <el-table-column prop="status" label="状态" width="100">
    <!-- 自定义列内容：用 el-tag 显示状态 -->
    <template #default="{ row }">
      <el-tag :type="row.status === '运行中' ? 'success' : 'danger'">
        {{ row.status }}
      </el-tag>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="180">
    <template #default="{ row }">
      <el-button size="small" type="primary">编辑</el-button>
      <el-button size="small" type="danger">删除</el-button>
    </template>
  </el-table-column>
</el-table>

<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
  <el-form-item label="设备名称" prop="name">
    <el-input v-model="form.name" />
  </el-form-item>
  <el-form-item label="设备类型" prop="type">
    <el-select v-model="form.type">
      <el-option label="激光切割机" value="laser" />
      <el-option label="CNC" value="cnc" />
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

const rules = {
  name: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度 2 到 20 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择设备类型', trigger: 'change' }
  ]
}

const submitForm = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    console.log('提交成功', form)
  }
}

<!-- 触发按钮 -->
<el-button type="primary" @click="dialogVisible = true">
  新增设备
</el-button>

<!-- 弹窗 -->
<el-dialog v-model="dialogVisible" title="新增设备" width="500px">
  <el-form :model="form">
    <!-- 表单内容 -->
  </el-form>
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary">确定</el-button>
  </template>
</el-dialog>

<!-- 卡片 -->
<el-card shadow="hover">
  <template #header>设备概况</template>
  <p>当前在线设备：42 台</p>
</el-card>

<!-- 标签 -->
<el-tag>默认</el-tag>
<el-tag type="success">运行中</el-tag>
<el-tag type="danger">故障</el-tag>
<el-tag type="warning">维修中</el-tag>

<!-- 徽章（数字角标） -->
<el-badge :value="12">
  <el-button>待处理工单</el-button>
</el-badge>

<el-menu
  default-active="1"
  background-color="#304156"
  text-color="#bfcbd9"
  active-text-color="#a9e3ff"
>
  <el-menu-item index="1">首页</el-menu-item>
  <el-sub-menu index="2">
    <template #title>设备管理</template>
    <el-menu-item index="2-1">设备列表</el-menu-item>
    <el-menu-item index="2-2">设备维保</el-menu-item>
  </el-sub-menu>
  <el-menu-item index="3">生产数据</el-menu-item>
</el-menu>

<el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[10, 20, 50, 100]"
  :total="total"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="fetchData"
  @current-change="fetchData"
/>

<el-container style="height: 100vh">
  <!-- 左侧导航 -->
  <el-aside width="220px">
    <div class="logo">智能制造管理系统</div>
    <el-menu default-active="1" router>
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/devices">设备管理</el-menu-item>
      <el-menu-item index="/production">生产数据</el-menu-item>
      <el-menu-item index="/quality">质量检测</el-menu-item>
    </el-menu>
  </el-aside>

  <!-- 右侧区域 -->
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header>
      <span>欢迎回来，张工</span>
    </el-header>
    <!-- 主内容区 -->
    <el-main>
      <!-- router-view 显示子路由页面 -->
      <router-view />
    </el-main>
  </el-container>
</el-container>

# 安装 antd (Ant Design 5.x)
npm install antd

# 安装图标库
npm install @ant-design/icons

import { Button, Space } from 'antd'

function App() {
  return (
    <Space>
      <Button type="primary">主要按钮</Button>
      <Button>默认按钮</Button>
    </Space>
  )
}

import { Button, Space } from 'antd'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons'

<Space>
  <Button type="primary">主要按钮</Button>
  <Button type="primary" danger>危险按钮</Button>
  <Button type="primary" icon={<PlusOutlined />}>新增</Button>
  <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
</Space>

import { Input } from 'antd'

// 基础输入框
<Input placeholder="请输入设备名称" />

// 带前缀图标的搜索框
<Input.Search placeholder="搜索设备..." onSearch={handleSearch} />

// 密码输入框
<Input.Password placeholder="请输入密码" />

// 文本域
<Input.TextArea rows={3} />

import { Select } from 'antd'

<Select
  style={{ width: 200 }}
  placeholder="选择状态"
  options={[
    { value: 'running', label: '运行中' },
    { value: 'stopped', label: '停机' },
    { value: 'maintenance', label: '维修中' },
  ]}
/>

import { DatePicker, Space } from 'antd'
const { RangePicker } = DatePicker

// 选择单个日期
<DatePicker />

// 选择日期范围
<RangePicker />

import { Table, Tag, Button, Space } from 'antd'

const columns = [
  { title: '设备ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '设备名称', dataIndex: 'name', key: 'name' },
  {
    title: '状态', dataIndex: 'status', key: 'status',
    render: (status) => (
      <Tag color={status === '运行中' ? 'green' : 'red'}>{status}</Tag>
    )
  },
  {
    title: '操作', key: 'action',
    render: (_, record) => (
      <Space>
        <Button type="link">编辑</Button>
        <Button type="link" danger>删除</Button>
      </Space>
    )
  },
]

<Table
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 10, total: 256 }}
  rowKey="id"
/>

import { Form, Input, Select, Button } from 'antd'

const DeviceForm = () => {
  const [form] = Form.useForm()

  const onFinish = (values) => {
    console.log('提交:', values)
  }

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item
        label="设备名称"
        name="name"
        rules={[{ required: true, message: '请输入设备名称' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="设备类型"
        name="type"
        rules={[{ required: true, message: '请选择设备类型' }]}
      >
        <Select options={[...]} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  )
}

import { Modal, Button } from 'antd'

<Button type="primary" onClick={() => setOpen(true)}>
  新增设备
</Button>

<Modal
  title="新增设备"
  open={open}
  onOk={handleOk}
  onCancel={() => setOpen(false)}
>
  {/* 表单内容 */}
</Modal>

import { Menu } from 'antd'
import { HomeOutlined, DesktopOutlined } from '@ant-design/icons'

<Menu
  theme="dark"
  mode="inline"
  defaultSelectedKeys={['1']}
  items={[
    { key: '1', icon: <HomeOutlined />, label: '首页' },
    { key: '2', icon: <DesktopOutlined />, label: '设备管理' },
  ]}
/>

import ProTable from '@ant-design/pro-table'

<ProTable
  columns={columns}
  request={async (params) =>} {
    const res = await fetchDeviceList(params)
    return { data: res.list, total: res.total, success: true }
  }}
  search={{
    filterType: 'light',   // 轻量筛选栏
  }}
  toolBarRender={() => [
    <Button type="primary">新增设备</Button>,
  ]}
  pagination={{ pageSize: 10 }}
  rowKey="id"
/>

import { ProFormText, ProFormSelect, ProFormDateTimePicker } from '@ant-design/pro-form'

<ProForm onFinish={async (values) =>} {
  await createDevice(values)
  message.success('提交成功')
}>
  <ProFormText
    name="name"
    label="设备名称"
    rules={[{ required: true }]}
  />
  <ProFormSelect
    name="type"
    label="设备类型"
    options={deviceTypes}
  />
  <ProFormDateTimePicker
    name="installDate"
    label="安装日期"
  />
</ProForm>

<template>
  <div class="device-page">

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable>
            <el-option label="运行中" value="running" />
            <el-option label="停机" value="stopped" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card>
      <template #header>
        <div style="display:flex;justify-content:space-between">
          <span>设备列表</span>
          <el-button type="primary" @click="openDialog()">新增设备</el-button>
        </div>
      </template>

      <el-table :data="tableData" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="type" label="设备类型" />
        <el-table-column prop="location" label="车间位置" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status]">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="{ row }">
            <el-button size="small" @click="openDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top:16px;justify-content:flex-end"
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @current-change="fetchData"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑设备' : '新增设备'">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="form.type">
            <el-option label="激光切割机" value="laser" />
            <el-option label="CNC加工中心" value="cnc" />
            <el-option label="焊接机器人" value="welding" />
          </el-select>
        </el-form-item>
        <el-form-item label="车间位置" prop="location">
          <el-input v-model="form.location" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 状态定义
const tableData = ref([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const isEdit = ref(false)
const formRef = ref()

const searchForm = ref({ name: '', status: '' })
const form = ref({ name: '', type: '', location: '' })

const statusMap = {
  '运行中': 'success',
  '停机': 'danger',
  '维修中': 'warning',
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const res = await api.getDeviceList({
      page: page.value,
      pageSize: pageSize.value,
      ...searchForm.value
    })
    tableData.value = res.data.list
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

// 打开弹窗（新增 or 编辑）
const openDialog = (row = null) => {
  isEdit.value = !!row
  if (row) form.value = { ...row }
  else form.value = { name: '', type: '', location: '' }
  dialogVisible.value = true
}

// 提交表单
const handleSubmit = async () => {
  await formRef.value.validate()
  if (isEdit.value) {
    await api.updateDevice(form.value)
    ElMessage.success('编辑成功')
  } else {
    await api.createDevice(form.value)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
  fetchData()
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该设备？', '警告', {
    type: 'warning',
  }).then(async () => {
    await api.deleteDevice(row.id)
    ElMessage.success('删除成功')
    fetchData()
  })
}

onMounted(() => fetchData())
</script>