Element-plus入门

原创于 2025-12-02 11:59:51 发布 · 104 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#语法
element-plus 专栏收录该内容
1 篇文章
订阅专栏
<template>
  <el-button type="primary">Hello Element Plus</el-button>
  <el-button type="success" size="small">成功按钮（小尺寸）</el-button>
  <el-button type="danger" disabled>禁用按钮</el-button>
  <el-button icon="Search">带图标按钮</el-button>

  <el-input v-model="username" placeholder="请输入用户名" :disable="isDisabled" clearable prefix-icon="User"></el-input>
  <!--  垂直容器布局-->
  <el-container style="height: 300px;border: 1px solid #2c3e50"> <!-- 布局容器 -->
    <el-header style="background-color: #409EFF;color: white;">头部</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: #F5F5F5;">侧边栏</el-aside>
      <el-main>
        24栅格布局
        <el-row :gutter="20"> <!-- gutter:列间距 -->
          <el-col :span="8"> 列1（占8、24）</el-col>
          <el-col :span="8"> 列2（占8、24）</el-col>
          <el-col :span="8"> 列3（占8、24）</el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>

  <!--  表单容器：model绑定表单数据,rules绑定验证规则-->
  <el-form :model="form" :rules="formRules" ref="formRef" label-width="100px">
    表单项:label 标签文本
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="password">
      <el-input v-model="form.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>

<!--  表格：data绑定数据源，border显示边框，stripe斑马纹-->
  <el-table :data="tableData" border stripe style="width: 100%">
<!--    表格列表：label列标题，prop对应数据的key-->
    <el-table-column label="ID" prop="id" width="80"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="操作">
<!--      自定义列内容-->
      <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" color="red" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  分页组件：@size-change 每页条数变化,@current-change页码变化-->
  <el-pagination @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10,20,30,40]"
    :page-size="pageSize"
    layot = "total,sizes,prev,pager,next,jumper"
    :total="total"
    style = "margin-top:20px;text-align: right;"
  >
  </el-pagination>

  <el-button type="primary" @click="openDialog">打开弹窗</el-button>
<!--  弹窗:v-model控制显示和隐藏;title标题，width宽度-->
  <el-dialog v-model="isDialogOpen" title="编辑用户" width="50%">
    <el-form :model="editForm" label-width="80px">
    <el-form-item label="姓名">
       <el-input v-model="editForm.name"></el-input>
    </el-form-item>

      <el-form-item label="年龄">
        <el-input v-model="editForm.age"></el-input>
      </el-form-item>

    </el-form>
<!--    弹窗底部按钮（通过footer插槽自定义）-->
    <template #footer>
      <el-button @click="isDialogOpen = false">取消</el-button>
      <el-button type="primary" @click="saveEdit">保存</el-button>
    </template>
  </el-dialog>
  <hr>
  <!-- 渲染后的按钮（不管用） -->
  <button class="el-button el-button--primary">
    按钮文字
  </button>
  <el-button type="primary" @click="showMessage">显示消息提示</el-button>
  <el-button type="danger" @click="showConfirm">显示确认弹窗</el-button>

  <el-button :size="buttonSize">响应式按钮</el-button>
  <el-input :size="inputSize" placeholder="响应式输入框">响应式输入框</el-input>
</template>

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

const username = ref('') //绑定输入值
const isDisabled = ref(false) //是否禁用

//表单数据
const form = ref({
  username: '',
  password: '',
  gender: 'male'
})
//表单验证规则(required:必填,message：错误提示,trigger:触发验证的时机)
const formRules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 10, message: '用户名长度在3-10之间', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, message: '密码至少6位', trigger: 'blur'}
  ]
})
//表单引用（用于调用表单方法）
const formRef = ref(null)

//提交表单：调用表单验证
const submitForm = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      console.log('表单验证通过,提交数据：', form.value)
      //这里写接口请求逻辑
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}
//重置表单
const resetForm = () => {
  // eslint-disable-next-line no-undef
  formRef.value.resetFields() //重置表单字段和验证状态
}

//表格数据（模拟接口返回）
const tableData = ref([
  {id:1,name:'张三',age:25},
  {id:2,name:'李四',age:24},
  {id:3,name:'qq',age:20},
])
//分页参数
const currentPage=ref(1) // 当前页码
const pageSize = ref(10) //每页条数
const total = ref(100) //总条数

//编辑操作
const handleEdit = (row) =>{
  console.log('编辑数据:',row)
}
//删除操作
const handleDelete = (row)=>{
  console.log("删除数据:",row)
}
//每页条数变化
const handleSizeChange =(val) =>{
  pageSize.value = val
  //这里写重新请求接口的逻辑(携带新的pageSize和currentPage)
}
//页码变化
const handleCurrentChange = (val) =>{
  currentPage.value = val
  //这里写重新请求接口的逻辑
}


//控制弹窗显示/隐藏
const isDialogOpen = ref(false)
//编辑表单数据
const editForm = ref({
  name:'',
  age:''
})
//打开弹窗
const openDialog = ()=>{
  editForm.value = {name:'张三',age:25} //模拟回显数据
  isDialogOpen.value = true
}
//保存逻辑
const saveEdit = ()=>{
  console.log('保存编辑:',editForm.value)
  isDialogOpen.value = false //关闭
}
//无需手动import,AutoImport自动导入
const showMessage = ()=>{
  ElMessage.success('操作成功') //成功消息
  // ElMessage.warning('警告显示')
  // ElMessage.error('错误显示')
}
const showConfirm = ()=>{
  ElMessageBox.confirm(
      '确定要删除这条数据吗？',
      '确认提示',
      {
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }
  ).then(()=>{
    ElMessage.success('删除成功！')
  }).catch(()=>{
    ElMessage.info('已取消删除')
  })
}
//初始化组件尺寸
const buttonSize = ref('default')
const inputSize = ref('default')
//窗口大小变化
const handleResize = ()=>{
  const width = window.innerWidth
  if (width < 768){
    buttonSize.value = 'mini'
    inputSize.value = 'mini'
  }else if (width<1200){
    buttonSize.value = 'small'
    inputSize.value = 'small'
  }else {
    buttonSize.value = 'default'
    inputSize.value = 'default'
  }
}
//挂载时监听,卸载时移除监听
onMounted(()=>{
  handleResize() //初始化
  window.addEventListener('resize',handleResize())
})
onUnmounted(()=>{
  window.removeEventListener('resize',handleResize())
})
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/** 修改按钮的背景色和文字色 (不生效)**/
:deep(.el-button--primary){
  background-color: #67c23a !important;
  border-color: #67c23a !important;
}
:deep(.el-button--primary:hover){
  background-color: red !important;
  border-color: red !important;
}
</style>