Element Plus

基于 Vue 3，面向设计师和开发者的组件库

效果

目录

Element Plus

效果

一、介绍

 1、官方文档

2、官方示例

 二、准备工作

1、安装依赖包

2、示例版本 

三、使用步骤

1、element-plus自动导入

Vite

2、处理数据格式

        1）表格展示时的格式处理

        2）编辑回显时的格式处理

        3）编辑提交时的格式处理

四、完整示例

Index.vue

Form.vue

一、介绍

 1、官方文档

一个 Vue 3 UI 框架 | Element Plus

一个 Vue 3 UI 框架 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/

2、官方示例

​​

 二、准备工作

1、安装依赖包

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2、示例版本 

"element-plus": "^2.4.4",

三、使用步骤

1、element-plus自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite
// vite.config.ts
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()],
    }),
  ],
})

注：完整引入 / 按需导入 / 手动导入等方式请参照下方链接配置

快速开始 | Element Plus

2、处理数据格式

接口数据格式

const tableData = [
  {
    id: '1',
    equipName: 'name-1',
    model: '型号1',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  },
  {
    id: '2',
    equipName: 'name-2',
    model: '型号2',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  },
  {
    id: '3',
    equipName: 'name-3',
    model: '型号3',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  }
]
        1）表格展示时的格式处理
// 获取参数值的方法
const getParameterValue = (parameters: any[], key: string) => {
  if (!parameters || !Array.isArray(parameters)) return '-'
  const param = parameters.find(item => item.key === key)
  return param ? `${param.value} ${param.unit || ''}` : '-'
}

详见完整示例...
        2）编辑回显时的格式处理
Object.assign(form, {
  id: item.id || '',
  equipName: item.equipName || '',
  manufacturer: item.manufacturer || '',
  manufactureDate: item.manufactureDate || '',
  model: item.model || ''
})

form.power = item.parameters?.find((p: any) => p.key === 'power')?.value || ''
form.weight = item.parameters?.find((p: any) => p.key === 'weight')?.value || ''
form.voltage = item.parameters?.find((p: any) => p.key === 'voltage')?.value || ''

详见完整示例...
        3）编辑提交时的格式处理
const submitData = {
  id: form.id,
  equipName: form.equipName,
  manufacturer: form.manufacturer,
  manufactureDate: form.manufactureDate,
  model: form.model,
  parameters: [
    { name: '功率', value: form.power, key: 'power', unit: 'kW' },
    { name: '重量', value: form.weight, key: 'weight', unit: 'kg' },
    { name: '电压', value: form.voltage, key: 'voltage', unit: 'V' }
  ].filter(item => item.value !== undefined && item.value !== null && item.value !== '')
}

详见完整示例...

四、完整示例

Index.vue

<template>
  <div>
    <!-- 多级表头 -->
    <el-table
      :data="tableData"
      border
      :cellStyle="{ textAlign: 'center' }"
      :headerCellStyle="{
        textAlign: 'center',
        background: '#F5F7FA',
        color: '#909399'
      }"
    >
      <el-table-column label="多级表头">
        <el-table-column type="index" label="#" width="55" />
        <el-table-column prop="equipName" label="设备名称" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.equipName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="生产商" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.manufacturer || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="manufactureDate" label="出厂日期" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.manufactureDate || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="model" label="设备型号" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.model || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="设备参数">
          <el-table-column prop="power" label="功率" show-overflow-tooltip>
            <template #default="scope">
              {{ getParameterValue(scope.row.parameters, 'power') }}
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量" show-overflow-tooltip>
            <template #default="scope">
              {{ getParameterValue(scope.row.parameters, 'weight') }}
            </template>
          </el-table-column>
          <el-table-column prop="voltage" label="电压" show-overflow-tooltip>
            <template #default="scope">
              {{ getParameterValue(scope.row.parameters, 'voltage') }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button
            icon="edit-pen"
            text
            type="primary"
            @click="formDialogRef?.openDialog(scope.row, 'view')"
          >
            详情
          </el-button>
          <el-button
            icon="edit-pen"
            text
            type="warning"
            @click="formDialogRef?.openDialog(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑、查看弹窗 -->
    <form-dialog ref="formDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const FormDialog = defineAsyncComponent(() => import('./Form.vue'))
const formDialogRef = ref()
const tableData = [
  {
    id: '1',
    equipName: 'name-1',
    model: '型号1',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  },
  {
    id: '2',
    equipName: 'name-2',
    model: '型号2',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  },
  {
    id: '3',
    equipName: 'name-3',
    model: '型号3',
    manufacturer: 'XX公司',
    manufactureDate: '2025-12-05',
    parameters: [
      {
        key: 'power',
        name: '功率',
        value: '2',
        unit: 'kW'
      },
      {
        key: 'weight',
        name: '重量',
        value: '20',
        unit: 'kg'
      },
      {
        key: 'voltage',
        name: '电压',
        value: '220',
        unit: 'V'
      }
    ]
  }
]

// 获取参数值的方法
const getParameterValue = (parameters: any[], key: string) => {
  if (!parameters || !Array.isArray(parameters)) return '-'
  const param = parameters.find(item => item.key === key)
  return param ? `${param.value} ${param.unit || ''}` : '-'
}
</script>

Form.vue

<template>
  <el-dialog
    :title="isViewMode ? form.equipName + ' 详情' : form.equipName + ' 编辑'"
    v-model="visible"
    :close-on-click-modal="false"
    draggable
    width="800px"
  >
    <el-form
      ref="dataFormRef"
      :model="form"
      :rules="dataRules"
      label-width="90px"
      v-loading="loading"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="生产商" prop="manufacturer">
            <el-input
              v-model="form.manufacturer"
              placeholder="请输入生产商"
              :disabled="isViewMode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="出厂日期" prop="manufactureDate">
            <el-date-picker
              v-model="form.manufactureDate"
              type="date"
              placeholder="请选择出厂日期"
              :disabled="isViewMode"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="设备型号" prop="model">
            <el-input v-model="form.model" placeholder="请输入设备型号" :disabled="isViewMode" />
          </el-form-item>
        </el-col>

        <!-- 设备参数 -->
        <el-col :span="24" class="mb10">
          <h4 style="margin: 0 0 10px; font-size: 14px; font-weight: 500">设备参数</h4>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="功率" prop="power">
            <el-input v-model="form.power" placeholder="请输入功率" :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="重量" prop="weight">
            <el-input v-model="form.weight" placeholder="请输入重量" :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="电压" prop="voltage">
            <el-input v-model="form.voltage" placeholder="请输入电压" :disabled="isViewMode" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <div v-if="isViewMode">
          <el-button type="primary" @click="visible = false">关 闭</el-button>
        </div>
        <div v-else>
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
        </div>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="EquipmentDialog">
import { nextTick, ref, reactive, defineEmits, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])

const dataFormRef = ref()
const visible = ref(false)
const loading = ref(false)
const isViewMode = ref(false)

const form = reactive({
  id: '',
  equipName: '',
  manufacturer: '',
  manufactureDate: '',
  model: '',
  power: '',
  weight: '',
  voltage: ''
})

const dataRules = ref({
  manufacturer: [{ message: '请输入生产商', trigger: 'blur' }],
  manufactureDate: [{ message: '请选择出厂日期', trigger: 'blur' }],
  model: [{ message: '请输入设备型号', trigger: 'blur' }],
  power: [{ message: '请输入功率', trigger: 'blur' }],
  weight: [{ message: '请输入重量', trigger: 'blur' }],
  voltage: [{ message: '请输入电压', trigger: 'blur' }]
})

const openDialog = (item: object, mode: 'edit' | 'view' = 'edit') => {
  visible.value = true
  isViewMode.value = mode === 'view'
  form.id = ''

  nextTick(() => {
    dataFormRef.value?.resetFields()
    Object.assign(form, {
      id: item.id || '',
      equipName: item.equipName || '',
      manufacturer: item.manufacturer || '',
      manufactureDate: item.manufactureDate || '',
      model: item.model || ''
    })

    form.power = item.parameters?.find((p: any) => p.key === 'power')?.value || ''
    form.weight = item.parameters?.find((p: any) => p.key === 'weight')?.value || ''
    form.voltage = item.parameters?.find((p: any) => p.key === 'voltage')?.value || ''
  })
}

const onSubmit = async () => {
  loading.value = true

  const valid = await dataFormRef.value.validate().catch(() => {})
  if (!valid) {
    loading.value = false
    return
  }

  const submitData = {
    id: form.id,
    equipName: form.equipName,
    manufacturer: form.manufacturer,
    manufactureDate: form.manufactureDate,
    model: form.model,
    parameters: [
      { name: '功率', value: form.power, key: 'power', unit: 'kW' },
      { name: '重量', value: form.weight, key: 'weight', unit: 'kg' },
      { name: '电压', value: form.voltage, key: 'voltage', unit: 'V' }
    ].filter(item => item.value !== undefined && item.value !== null && item.value !== '')
  }

  try {
    await 接口地址(submitData)
    ElMessage.success('修改成功')
    visible.value = false
  } catch (err: any) {
    ElMessage.error(err.msg || '操作失败')
  } finally {
    loading.value = false
  }
}

defineExpose({
  openDialog
})
</script>

 欢迎关注VX公众号：前端小知识营地

# vue.js # elementui # 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

AI 日报 - 2026年7月4日

【AI日报摘要】2026年7月4日科技经济要闻速览： 科技动态： 阿里全面禁用Claude系列AI产品，7月10日起强制迁移至自研Qoder；达摩院AI系统ElementsClaw仅用28小时发现4种全新超导体。 Anthropic进军AI芯片领域，与三星微软展开合作，行业自研芯片趋势加速。 经济聚焦： A股机器人板块爆发，44股涨停领涨市场，创业板周跌4.6%呈现高低切换。 快手旗下可灵AI完成

avatar DAMO开发者矩阵
cover

行星减速机适用于哪些设备？典型工业应用场景总结（工程选型参考）

avatar DAMO开发者矩阵
cover

嵌入式系统讨论

avatar DAMO开发者矩阵