使用iview中的button组件,动态改变type报错

最新推荐文章于 2022-10-04 16:16:03 发布
最新推荐文章于 2022-10-04 16:16:03 发布
阅读量1.6k 收藏 1
点赞数 1
文章标签： js vue javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baozilianya/article/details/109690273
版权
在使用iview库的button组件时，遇到动态改变type属性导致的错误。错误的原因是iview的button组件的type属性不允许为空。通过将空字符串改为'default'，并根据条件判断设置为'primary'或'default'，成功解决了问题。示例代码展示了如何在v-for循环中正确设置button的type属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用iview中的button组件,动态改变type报错

用element这样写的时候是不会报错的，原来iview中的button组件type不能为空，所以最后改成了这样，完美解决：
// 将原来的''值改为default
<Button v-for="(item,index) in tabList" :key="index" :type="item.id === tabName ? 'primary' : 'default'">{{item.name}}</Button>

12
在这里插入图片描述

vue iview table实现全选
qq_37635012的博客
04-08 679
【代码】vue iview table实现全选。
动态添加element标签，数据操作
weixin_44860425的博客
12-27 2409
我的问题每次点击 添加新值按钮就会添加一个下拉框 然后我对下拉框进行更改的时候 第一次没问题 但是如果我在选中的下拉框中从新选择 数据就会发生变化 会保留之前选中的值 这样是不对 通过索引 每次进行更改时都会把之前选中的给替换掉 非常重要：this.attr.splice(index,1,{name , id}) <el-dialog :title="visibleTitle" :v...
iview修改箭头icon
Debug Dream的博客
11-04 2756
前言：前端开发难免会有意无意听到BFC这个词，但是好像又没有很明确的思想去说清楚什么是BFC，感觉BFC离我们很近，又好像有点疏远。今天我们就简单聊聊BFC这个“孽缘”。 ##1.BFC的官方定义： BFC 全称为 块格式化上下文 (Block Formatting Context) 。一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部...
Iview Button type脱坑
Codernmx
09-28 293
解决[Vue warn]: Invalid prop: custom validator check failed for prop “type”. found in ---> <Button> <TableCell> <TableTr> <TableBody> <Table> <Modal> 根据提示找Button 下
element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色
懒虫的博客
07-15 1万+
element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色
mfc动态改变clip风格_动态组件设计指南
weixin_39623750的博客
11-27 178
​简化符号的技巧是平衡动态元素和约束的使用。这使你可以最大程度地减少设计系统中所需的符号数量。使它更容易维护和更改变。设计人员需要创建重复的符号来覆盖单个组件的每个状态的日子已经一去不复返了。按钮样式指南动态组件还允许你使用Sketch的内置调整大小功能来修改其内容，而不会破坏整体布局。这样可以提高所有组件的灵活性，而无需根据其内容不断调整符号的需要。在本文中，我将指导您创建以下动态组件：按钮下拉...
iview使用Modal时打开关闭页面抖动问题
hellolipop
08-31 1215
在使用iview的Modal时经常会出现抖动的问题，其实大多数的ui库都有这个问题，最好笑的是iview的文档本身也是有这个问题的。言归正传，这样的抖动是肯定不会让客户满意的，这时候该怎么解决呢？当然是开动你的小脑经，打开调试窗口，打开你的Modal，当模态框打开关闭时，你的body是不是多了点东西 这就是罪魁祸首了。 知道了具体是什么原因导致的，那解决起来就简单了，在打开和关闭的时候弹框会分别先加上overflow: hidden导致你的页面滚动条没了，关闭的时候移除样式。这就是抖动为什么会发生的主
vue使用iview中Upload上传组件
zhongqing1995的博客
12-01 2643
先上代码,注解在下面 html代码 <template> <Upload multiple action="Api/api/sys/fileController/uploadFile" :before-upload="handleUpload" :data="fileData" :on-success="successEvent" > <Button icon="ios-cloud-upload-outline" type="primary">上传<
微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题
kotoriyou的博客
06-09 5769
微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题 首先先介绍一下iview weapp 这个微信小程序组件库吧，这个看官方文档能学到非常明白，简单易用。虽然东西少了点，但应付微信小程序开发还是可以用一用的。 首页是这个样子： 到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Bu...
vue项目引用 iView 组件——全局安装与按需加载
WXY19951125的博客
11-01 6952
随着Vue框架的热度，出现了不少基于Vue的UI组件库，这次项目用到了 iView 这个组件库。使用方法官网很详细。 官网：https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安装以及按需引用的用法。 一、全局引用 ①、先安装iview          npm install iview -save        Tips：你可能注意npm install...
iView UI 使用page分页添加跳转按钮-输入页码后点击跳转
S筱潇S四维Smile
04-08 746
使用电梯，快速跳转到某一页 在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转 这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~ <div class="overflow-h mt10"> <span class="fr mt5 ml10"> <Button class="btn-page mr10" type="primary" size="small" @click="goElevat
Vuex从入门到实战（十三）——【实践篇】按钮样式切换
芳草萋萋鹦鹉洲哦
05-26 737
Todos 10 这节实现三个按钮样式切换，使用三目运算即可实现。 <a-button type="primary / default"> 需要注意的是 type 要进行属性绑定 （不要跟我一样败在一个冒号上） 1、store/index.js——增加 changeViewkey() 修改视图的关键字，增加公共数据 viewKey 存储当前选中按钮。 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axi.
iview table里按钮判断显示（方便简单）
xy19950125的博客
02-21 6456
根据后台返回的状态 进行判断 有些可能是必有的 所以用一个数组 然后根据状态值 满足就push里面去    &lt;template&gt; &lt;div&gt; &lt;div class="navigation"&gt; &lt;p&gt; &lt;span&gt;管理首页&amp;nbsp;&gt;&
vue3 element-plus 动态设置el-button类型，npm run dev项目正常，npm run build失败
jdjfjgfdgdfg的博客
03-24 2718
“vue”: “^3.2.16”, “vite”: “^2.6.4”, “element-plus”: “^2.1.4”, 以下程序可以正常执行，但是npm run build失败 <template> <el-button :type="typeBtn">sfsdfsdf</el-button> </template> <script lang="ts" setup> const typeBtn = ref('info'); </sc
Vue ElementUI el-button 修改样式
前端技术
02-15 9687
el-button 这里以 危险样式为例： <el-button type="danger">危险按钮</el-button> .el-button--danger { height:30px; line-height: 0.4; background-color:#c13030; border:1px solid #f57d7d; border-radius:1px; span { font-family
Element组件引发的思考Vue中mixins使用，写出高复用组件
六小登登的专栏
02-21 201
关注我的都喜欢上了我我们都知道 Vue 采用的是一种组件化开发模式，组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例，组件的创建，组件间的通讯，组件如...
Vue-点击按钮，当前按钮显示对应的type样式，而其他元素移除样式
slient033的博客
10-04 1743
Vue-点击按钮，当前按钮显示对应的type样式，而其他元素移除样式
Element-Ui组件（三）Button 按钮
热门推荐
究极死胖兽的博客
06-03 5万+
Element-Ui组件（三）Button 按钮 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基础用法 el-button经常与icon搭配使用，type属性主要用于控制其颜色，plain属性用于控制其风格，round、circle属性用于控制其形状，以下是一组增删改查的按钮示例： <template&gt...
iview 升级指南 —— Button 篇
weixin_33686714的博客
07-31 2533
iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。虽然官网已经有长长的更新日志，但看起来还是有些抽象了，所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。这一篇给大家讲解的，是一个很常用的组件 —— Button 先看结论 新版 Button 有如下新特性： 支持链...
button的type
05-13
button元素的type属性用于指定按钮的类型。常用的type属性值包括： - "button": 普通的按钮，此为默认值。 - "submit": 提交表单数据。 - "reset": 重置表单数据。 - "image": 图像型按钮。 - "checkbox": 多选框。 - "radio": 单选框。 示例代码： ```html <button type="button">普通按钮</button> <button type="submit">提交</button> <button type="reset">重置</button> <button type="image" src="button.png">图像按钮</button> <input type="checkbox" id="checkbox1" name="checkbox" value="1"> <label for="checkbox1">复选框</label> <input type="radio" id="radio1" name="radio" value="1"> <label for="radio1">单选框</label> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值