常用的element-plus标签

el框架的常用标签和属性方法

安装

npm i element-plus

引入

import ElementPlus from "element-plus";  // el框架
import "element-plus/dist/index.css";   // el样式
​
app.use(ElementPlus);  // 使用

常用属性

侧边栏菜单

import { useRoute } from 'vue-router';
const route = useRoute()
​
<el-scrollbar>    // 侧边栏
    <el-menu :router="true" :default-openeds="['/']" :default-active="route.fullPath">  // 侧边栏菜单
        <el-menu-item  :index="item.path">    // 侧边栏子菜单（单）
            <template #title>
                <span> 标题</span>   
            </template>
        </el-menu-item>
        
         <el-sub-menu :index="item.path">     // 侧边栏子菜单 （多级）
             
            <template #title>
                <span> 标题</span>
            </template>
             
             <el-menu-item  :index="item.path">         // 侧边栏子菜单（嵌套 单）
                <template #title>
                    <span> 标题</span>   
                </template>
            </el-menu-item>
             
        </el-sub-menu>
    </el-menu>
 </el-scrollbar>
​
// :router="true"  使用菜单index作为路由跳转
// :default-openeds="['/']"   默认打开的多级菜单
// :default-active="route.fullPath"   默认选中的菜单

表单

<el-form v-model="data">
     <el-form-item label="输入框标题" label-width="100px">
            <el-input v-mode='data.item1' placeholder='提示内容'>
     <el-form-item>
</el-form>
                
// label-width  输入框的宽度

​

​

​

表格

​<el-table :data="tableData" style="width: 100%" height="250" border>
    <el-table-column prop="zip" label="Zip" width="120" />   // 默认表格
    
      <el-table-column label="操作">   // 插槽表格
                <template #="{ row }">   // row 该列表格的数据
                    <el-button size="small" type="warning" @click="updateoraddData(row)">修改</el-button>
                </template>
       </el-table-column>
</el-table>
​
// :data  要渲染的数组
// border 显示边框
// prop  改行表格展示的数据
// label  该列表格的标题
// width  该列表格的宽
// #="{row}"  插槽表格的数据

​

分页器

 <el-pagination :page-sizes="[5, 10, 20, 30]" :default-page-size="searchData.pageSize" :background="true"
 layout="prev, pager, next, jumper,->,total,sizes" :total="total" @size-change="handleSizeChange"
 @current-change="handleCurrentChange" />
​
// :page-sizes="[5, 10, 20, 30]"  一页展示的数据数量下拉框选择器
// :default-page-size="searchData.pageSize"   一页默认的展示数量，与pageSize相同
// :background="true"    分页器按钮添加背景颜色
// layout="prev, pager, next, jumper,->,total,sizes"    分页器各个功能的排列方式    ->  往最右边挤
// :total="total"    总数
​
// @size-change="handleSizeChange"   控制每页的显示个数
// @current-change="handleCurrentChange"   控制不同的页面

对话框

<el-dialog
    v-model="dialogVisible"
    title="标题"
    width="30%"
  >
    <span>内容</span>
    
    <template #footer>   // 底部按钮插槽
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
    
  </el-dialog>
​
// v-model="dialogVisible"    对话框的显示隐藏

消息弹出框

const open = () => {      // 触发弹出框的函数
  ElMessageBox.confirm('内容','标题')   // 消息确认框
    .then(() => { })   // 选择确定的执行函数，可发起请求
    .catch(() => { }) // 选择取消的执行函数，关闭弹出框
}
// ————————————————————————————————————————————
ElMessage({     // 消息提示框，
    type:'success 或 error',
    message:'提示信息'
})

布局方法

<el-row>  // 定义 行
     <el-col :span="24"> </el-col>   // 定义列 共为 24 ，根据需要调节
</el-row>

下拉选择框

 <el-select v-model="sele">   // 使用v-model绑定选中值
    <el-option value="一">一</el-option>    // value 为实际选中的值
 </el-select>