el-button type用法

合集下载

element-uitable多选CheckBox参数解析

element-uitable多选CheckBox参数解析element-UI⾥的table表格与多选框CheckBox的组合很常⽤,官⽹也给了很多参数,⾃⼰总结了⼀下,⽅便⽇后使⽤本博客源码: 这个项⽬⾥会把平时博客写的⼀些功能的代码都放在⾥⾯,有需要可以下载看看,有帮助的话点个star哈1、简易⽤法,没有附加的功能要在表格⾥使⽤CheckBox很简单,只需设置type就可以<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column>...</el-table>// methodhandleSelectionChange (val) {console.log(val)}2、切换选中的表格,默认选中表格使⽤表格的toggleRowSelection可以切换表格的选中状态,也可以设置表格的默认选中⾏<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column>...</el-table>// method// 处理表格数据,已还款的⾃动选上handleCheckData () {let table = this.tableData2 // 从后台获取到的数据table.forEach(item => {if (item.status === '已还款') {// toggleRowSelection可以切换表格⾏的选中状态,接收两个参数第⼀个是要切换的⾏,这⾥需要的对象格式,// 第⼆个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态// ⽅法调⽤要等元素挂载才后才能执⾏,这⾥加⼀个判断,这个⽅法要放在数据获取后this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, true)}})}3、设置表格⾏为不可选通过selectable参数可以⼿动设置某些表格⾏未不可选择<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><el-table-columntype="selection":selectable="handleDisable"width="55"></el-table-column>...</el-table>// method// 处理表格数据,未还款的默认不能勾选// 有两个参数返回,表格的每⼀⾏对象和当前索引handleDisable(row, index) {// 函数需要⼀个返回值,true为可选,false为不可选择if (row.status === '未还款') {return false} else {return true}}4、保存数据更新前选中的数据通过reserve-selection和row-key搭配使⽤,可以设置保留数据更新前的选中值(分页刷新数据等) <el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable":row-key="handleReserve"@selection-change="handleSelectionChange"><el-table-columntype="selection"reserve-selectionwidth="55"></el-table-column>...</el-table>// method// 表格数据处理,保存上⼀页选中的数据// 返回的参数是每⼀⾏的值,需要指定表格数据的唯⼀值,⼀般是idhandleReserve (row) {return row.id}5、其他的⼀些⽅法// 清除选中的数据this.$refs.checkTable.clearSelection()// 切换所有⾏的选中状态this.$refs.checkTable.toggleAllSelection()select的reserve-selection和toggleRowSelection⼀起⽤时,⽐如下⾯的场景,选择左边表格数据,右边对应展⽰列表,点击右边的列表也能控制左边的表格选中状态这种场景会出现⼀个问题,当你在第⼀页选中数据,跳转到第⼆页⼜选择数据,再跳转回第⼀页时,删除第⼀页选中的数据会不能取消选中状态,具体如图⼀开始的代码是这样的<div class="contanier"><div class="table-contanier"><el-tableref="checkTable":data="tableData"borderstyle="width: 100%"row-key="id"@selection-change="handleSelectionChange"<el-table-columntype="selection"reserve-selectionwidth="55"/><el-table-columnlabel="姓名"prop="name"/><el-table-columnlabel="年龄"prop="age"/><el-table-columnlabel="班级"prop="class"/></el-table><el-paginationlayout="prev, pager, next":total="30"@current-change="changePage"/></div><ul class="list"><li v-for="(item, index) in list" :key="index" class="item">{{ }} <el-button type="text" @click="removeName(item)">删除</el-button></li></ul></div>methods: {// 表格选中handleSelectionChange(val) {console.log('选中的表格', val)this.list = val},// 删除,取消表格选中removeName(item) {this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, false)}}出现这种问题的原因是因为当你从第⼆页跳转回第⼀页,你的tableData是从后台从新获取并赋值的,在当前页取消选中状态时,列表⾥的item和左边表格tableData⾥的数据虽然值⼀样,但是此时他们指向的内存地址不⼀样.所以,不能再传列表⾥的item了解决⽅法handleSelectionChange(val) {console.log('选中的表格', val)this.list = val},// 删除,取消表格选中removeName(item) {const arr = this.tableData.filter(sub => { return sub.id === item.id }) // 取消当前表格⾥的选中状态时,⽤表格⾥的数据const row = arr.length ? arr[0] : item// console.log(item, row)this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(row, false)},。

vue3使用element-plus搭建后台管理系统之菜单管理功能

vue3使⽤element-plus搭建后台管理系统之菜单管理功能菜单管理是⼀套系统中最常见最核⼼的系统管理模块之⼀，我把菜单管理分成了2个部分，左边可以管理维护菜单，在菜单的最右侧可以维护每个菜单按钮权限配置使⽤element-plus el-tree组件快速开发树形菜单结构，el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能<template><div class="common-tree"><el-tree:ref="treeRef":data="treeData":check-strictly="checkStrictly"show-checkbox:accordion="false"node-key="id"default-expand-all:highlight-current="true":expand-on-click-node="false"@node-click="nodeClick":filter-node-method="filterNode"empty-text="暂⽆数据"><template #default="{ node, data }"><span class="custom-tree-node"><span style="margin-right: 15px;">{{ }}</span><slot:data="data":node="node"/></span></template></el-tree></div></template><script>import { ref, reactive } from 'vue'import { returnStatement } from '@babel/types';export default {name: 'CommonTree',props: {treeRef: {type: String,default: "treeRef"},treeData: {type: Array,required: true,default () {return []}},checkStrictly: {type: Boolean,default () {return true}}},setup(props, { emit }) {const nodeClick = (data, node, tree) => {emit('nodeClick', data, node, tree)}const filterNode = (value, data) => {if (!value) return truereturn bel.includes(value)}return { nodeClick, filterNode }}}</script>使⽤element-plus el-dialog、el-icon、el-form组件实现菜单新增编辑el-dialog组件实现弹窗，选择图标功能，⽗组件通过v-model绑定变量，⼦组件通过emit('update语法糖实现⽗⼦组件属性快速传递⼦组件代码：<template><el-dialog width="800px" v-model="visible" title="图标" :before-close="handleClose" ><ul class="iconUl"><li v-for="icon in iconList" :key="icon"><span :class="{'active':choosedIcon === icon}"@click="chooseIcon(icon)"@dblclick="confirm(icon)"><el-icon style="width:48px;height: 48px;"><component class="icon" :is="icon" /></el-icon></span><p>{{ icon }}</p></li></ul><template #footer><span class="dialog-footer"><el-button type="primary" @click="confirm(choosedIcon)">确认</el-button> <el-button @click="this.$emit('update:visible', false)">取消</el-button></span></template></el-dialog></template><script>import { ref, reactive } from 'vue'import * as IconsModule from '@element-plus/icons-vue'export default {name: 'Icons',props: {visible: {type: Boolean,default: false}},setup(props, { emit }) {const iconList = ref([])const choosedIcon = ref(null)for (var key in IconsModule) {iconList.value.push(IconsModule[key].name)}const chooseIcon = (icon) => {choosedIcon.value = icon}const confirm = (icon) => {emit('update:icon', icon)emit('update:visible', false)}const handleClose = (done) => {emit('update:visible', false)}return { iconList, choosedIcon, chooseIcon, confirm, handleClose }}}⽗组件代码：<icons v-model:visible="dialogIconVisible" v-model:icon="menu.icon" />使⽤element-plus el-table组件实现菜单按钮权限配置菜单按钮权限配置表格部分代码：<el-tableref="resourceTableKey":data="resource.tableData.records"stripeempty-text="暂⽆数据":header-cell-style="{background:'#FCFBFF',border:'0'}"style="width: 100%"@selection-change="resourceSelectChange"><el-table-column type="selection" width="40" /><el-table-column label="编码" width="80" show-overflow-tooltip><template #default="scope">{{ scope.row.code }}</template></el-table-column><el-table-column label="名称" width="80" show-overflow-tooltip><template #default="scope">{{ }}</template></el-table-column><el-table-column label="请求⽅式" width="80" show-overflow-tooltip><template #default="scope">{{ scope.row.method }}</template></el-table-column><el-table-column label="请求地址" width="80" show-overflow-tooltip><template #default="scope">{{ scope.row.url }}</template></el-table-column><el-table-column label="操作" width="140"><template #default="scope"><el-button type="primary" size="small" @click="resourceEdit(scope.$index, scope.row)">修改</el-button><el-buttontype="danger"size="small"@click="resourceSingleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table>// ----------------------编辑菜单按钮权限配置----------------------------<script>const resourceTableKey = ref(null)const resource = reactive({queryParams: {code: null,name: null,menuId: null},tableData: {total: 2,records: []},pagination: {size: 10,current: 1},formData: {},selection: []})const resourceSearch = () => {getResourceList().then(data => {resource.tableData.records = data.data})}const resourceAdd = () => {dialogEditVisible.value = trueresource.formData = {}}const resourceEdit = (index, row) => {dialogEditVisible.value = trueresource.formData = row}const resourceSingleDelete = (index, row) => {ElMessageBox.confirm('确认删除?','确认删除',{confirmButtonText: '确认',cancelButtonText: '取消',confirmButtonClass: 'confirmButton',type: 'warning',}).then(() => {resource.tableData.records.splice(index, 1)}).catch(() => { })}const resourceSelectChange = (selection) => {resource.selection = selection}const resourceBatchDelete = () => {if (!resource.selection.length) {ElMessageBox.alert('请选择要删除项！', '提⽰', { confirmButtonText: '确认', type: 'warning' })return}ElMessageBox.confirm('确认删除?','确认删除',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(() => {resource.tableData.records = resource.tableData.records.filter(function(items){return (resource.selection.filter(function(selectionItems){return selectionItems.id == items.id})).length == 0})}).catch(() => { })}const resourceReturn = { resourceTableKey, resource, resourceEdit, resourceAdd, resourceSingleDelete, resourceSelectChange, resourceBatchDelete } </script>// ----------------------编辑菜单按钮权限配置----------------------------菜单按钮权限配置表单部分代码：<template><el-dialog width="800px" v-model="visible" title="修改" :before-close="handleClose" ><el-form ref="form" :model="fromData" label-position="right" label-width="100px"><el-form-item label="编码" prop="code"><el-input v-model="fromData.code" /><p class="note">建议使⽤:作为分隔符，并以view、add、update、delete、export、import、download、upload等关键词结尾</p><p class="note">如：menu:add、 resource:view、 file:upload</p></el-form-item><el-form-item label="名称" prop="name"><el-input v-model="" /></el-form-item><el-form-item label="请求⽅式" prop="describe" ><el-input v-model="fromData.method" /></el-form-item><el-form-item label="请求地址" prop="describe" ><el-input v-model="fromData.url" /></el-form-item><el-form-item label="描述" prop="describe" ><el-input v-model="fromData.describe" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button type="primary" @click="confirm()">确认</el-button><el-button @click="this.$emit('update:visible', false)" >取消</el-button></span></template></el-dialog></template><script>import { ref, reactive, watch } from 'vue'import { returnStatement } from '@babel/types';export default {name: 'edit',props: {visible: {type: Boolean,default: false},resource: {type: Object,default: () => ({})}},setup(props, { emit }) {const fromData = reactive({})watch(() => props.resource, (newResource) => {for (const key in fromData) {fromData[key] = ''}for (const key in newResource) {fromData[key] = newResource[key]}}, { immediate: true })const confirm = () => {for (const key in fromData) {props.resource[key] = fromData[key]}emit('update:visible', false)}const handleClose = (done) => {emit('update:visible', false)}return { confirm, handleClose, fromData }}}</script>到此这篇关于vue3使⽤element-plus搭建后台管理系统---菜单管理的⽂章就介绍到这了,更多相关vue3 element-plus后台管理系统内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

el-butten参数

el-button是Element UI库中的一个组件，用于创建按钮。

它接受多个参数来定制按钮的样式和行为。

以下是一些常见的el-button参数：
1.type：定义按钮的类型。

可选的值包括primary、success、warning、danger、info、
text等，分别对应不同的颜色样式。

2.plain：布尔值，定义按钮是否为朴素按钮。

朴素按钮在未被点击时颜色较淡，点击后
颜色变深。

3.round：布尔值，定义按钮是否为圆角按钮。

圆角按钮的边框棱角部位都是圆的。

4.circle：布尔值，定义按钮是否为圆形按钮。

圆形按钮的整个边框都是圆形的。

5.icon：用于设置按钮的图标。

6.size：用于控制按钮的尺寸，可选的值有medium、small、mini。

7.disabled：布尔值，定义按钮是否禁用。

8.loading：布尔值，定义按钮是否处于加载状态。

9.autofocus：布尔值，定义页面加载时按钮是否自动获取焦点。

10.native-type：用于定义按钮的原生类型，可选的值有button、submit、reset。

以上只是el-button组件的一部分参数，Element UI还提供了更多参数以满足不同的需求。

element语法

element语法Element是Vue.js生态系统中用于构建用户界面的一套组件库。

在这套组件库中，Element提供了常用的表单、导航、布局、提示等多种组件，可以方便快捷地完成用户界面的开发。

Element的语法简单明了，几乎所有组件的结构都遵循以下的基本语法规则：```<el-组件名 [属性名]="属性值"></el-组件名>```其中，`[属性名]="属性值"`是可选的，属性名根据不同的组件而异，属性值用于初始化组件，可以是静态值也可以是动态值，可以通过`{{}}`表达式绑定Vue实例中的数据。

以下是一些常用的组件和它们的属性和示例：## 布局组件### el-row使用`el-row`可以轻松地创建一个栅格系统的布局，并且可以设置不同的响应模式，如栅格间距、排列方式、对齐方式、占据列数等。

属性：- `gutter`：设置栅格之间的水平间隔，单位是像素（px），默认是0。

- `type`：设置栅格的排列方式，有`flex`和`no-flex`两种类型。

- `justify`：设置栅格中的元素在主轴上的对齐方式，有`start`、`end`、`center`、`space-between`、`space-around`五种类型。

- `align`：设置栅格中的元素在侧轴上的对齐方式，有`top`、`middle`、`bottom`三种类型。

示例：<el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-contentbg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row>````el-col`是`el-row`的子组件，用于创建栅格系统中的列，可以设置占据栅格的列数、偏移量等。

element-plus 常用class汇总

Element Plus 是 Vue 3 的一个组件库，它提供了丰富的 UI 组件用于构建界面。

Element Plus 使用了统一的设计语言，使得组件之间有良好的一致性。

以下是一些常用的 Element Plus 组件的 class：●按钮 (Button)⏹.el-button：基础按钮样式⏹.el-button--primary：主要按钮样式⏹.el-button--success：成功按钮样式⏹.el-button--warning：警告按钮样式⏹.el-button--danger：危险按钮样式⏹.el-button--info：信息按钮样式⏹.el-button--text：文字按钮样式●输入框 (Input)⏹.el-input：基础输入框样式⏹.el-input--large：大尺寸输入框样式⏹.el-input--small：小尺寸输入框样式●表格 (Table)⏹.el-table：基础表格样式⏹.el-table--border：带边框的表格样式⏹.el-table--stripe：条纹表格样式●卡片 (Card)⏹.el-card：基础卡片样式●导航条 (Navbar)⏹.el-navbar：基础导航条样式●提示框 (Tooltip)⏹.el-tooltip：基础提示框样式●布局 (Layout)⏹.el-container：基础容器样式，常用于页面的主体部分●表单 (Form)⏹.el-form：基础表单样式●图片 (Image)⏹.el-image：基础图片样式，常用于图片容器或者图片列表中●分页器 (Pagination)●.el-pagination：基础分页器样式弹出层 (Popover)●.el-popover：基础弹出层样式，常用于显示额外信息或操作。

进度条 (Progress)●.el-progress：基础进度条样式。

例如，.el-progress--line是线性进度条，.el-progress--circle是环形进度条。

elementui validator用法

Element UI是一个基于Vue的框架，提供了一套丰富的组件库，其中包括表单验证组件。

Element UI的表单验证组件提供了强大的验证功能，可以方便地校验表单输入的数据。

Element UI的表单验证组件使用了validator方法进行表单验证。

validator方法接受一个回调函数作为参数，该回调函数用于处理表单验证逻辑。

下面是一个简单的示例，演示了如何使用Element UI的表单验证组件进行表单验证：```html<template><el-form :model="form" :rules="rules" ref="form" label-width="120px"><el-form-item label="用户名" prop="username"><el-input v-model="ername"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('form')">提交</el-button></el-form-item></el-form></template><script>export default {data() {return {form: {username: '',password: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('提交成功');} else {console.log('error submit!!');return false;}});}}};</script>```在上面的示例中，我们定义了一个包含用户名和密码两个字段的表单，并设置了对应的验证规则。

element ui 手动触发form表单校验的方法

element ui 手动触发form表单校验的方法全文共四篇示例，供读者参考第一篇示例：Element UI 是一款基于Vue.js 的组件库，提供了丰富的组件和工具，方便我们快速构建优雅美观的界面。

在开发前端页面时，表单校验是一个很重要的环节，通常我们会使用Element UI 提供的Form 组件来进行表单校验。

但有时候，我们可能需要手动触发表单校验，即使表单没有被提交，这篇文章就来介绍一下如何手动触发Element UI 表单校验。

### Element UI 表单校验简介在Element UI 中，表单校验是通过`el-form` 组件实现的。

我们可以在表单中使用它提供的各种校验规则来验证用户输入的数据是否符合要求。

基本的使用方法如下：```vue<template><el-form ref="myForm" :model="form" :rules="rules"><el-form-item label="用户名" prop="username"><el-input v-model="ername"></el-input></el-form-item><el-form-item><el-button @click="submitForm">提交</el-button></el-form-item></el-form></template><script>export default {data() {return {form: {username: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]}};},methods: {submitForm() {this.refs.myForm.validate((valid) => {if (valid) {// 表单校验通过，进行提交操作} else {// 表单校验不通过，进行错误处理}});}}}</script>```在这个例子中，我们声明了一个简单的表单，包含了一个输入框和一个提交按钮，输入框需要输入用户名，并设置了必填的校验规则。

使用elementui中的按钮参数

使用elementui中的按钮参数ElementUI是一款基于Vue.js的组件库，提供了丰富的UI组件和交互效果，方便开发者快速构建美观、易用的Web应用。

其中，按钮是常用的UI组件之一，ElementUI提供了多种按钮类型和参数，本文将介绍如何使用ElementUI中的按钮参数。

一、按钮类型ElementUI提供了多种按钮类型，包括默认按钮、主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

通过设置按钮的type属性，可以实现不同类型的按钮效果。

默认按钮：type="default"，为灰色背景，常用于次要操作或取消操作。

主要按钮：type="primary"，为蓝色背景，常用于主要操作或提交操作。

成功按钮：type="success"，为绿色背景，常用于成功提示或确认操作。

信息按钮：type="info"，为青色背景，常用于信息提示或展示。

警告按钮：type="warning"，为橙色背景，常用于警告提示或需要用户确认的操作。

危险按钮：type="danger"，为红色背景，常用于危险操作或删除操作。

二、按钮大小ElementUI提供了三种按钮大小，包括默认大小、中等大小和小型大小。

通过设置按钮的size属性，可以实现不同大小的按钮效果。

默认大小：size="default"，为标准大小。

中等大小：size="medium"，为稍大的按钮大小。

小型大小：size="small"，为较小的按钮大小。

三、禁用状态ElementUI提供了禁用状态的按钮，通过设置按钮的disabled属性，可以实现禁用状态的按钮效果。

禁用状态的按钮无法点击，常用于表单验证或操作权限控制。

四、图标按钮ElementUI提供了图标按钮，通过设置按钮的icon属性，可以实现带图标的按钮效果。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

`el-button` 是Element UI 中的一个按钮组件，用于在页面上创建按钮。

`type` 属性用于设置按钮的类型，有以下几种类型：
1. `primary`：主要按钮，默认样式。

2. `success`：成功按钮，绿色背景。

3. `info`：信息按钮，蓝色背景。

4. `warning`：警告按钮，黄色背景。

5. `danger`：危险按钮，红色背景。

6. `text`：文本按钮，无背景色。

7. `link`：链接按钮，无背景色，鼠标悬停时显示下划线。

示例代码：
```html
<template>
<div>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="text">文本按钮</el-button>
<el-button type="link">链接按钮</el-button> </div>
</template>
```。