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

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

使用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
在这里插入图片描述

包子脸呀
关注
专栏目录
iview的日历组件，iview的日历组件
02-01
在前端开发领域，`iView` 是一个广受欢迎的 Vue.js UI 框架，它提供了许多优雅且易于使用的组件，极大地提升了开发效率。本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中...
Vue ElementUI el-button 修改样式
前端技术
02-15 9209
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 182
关注我的都喜欢上了我我们都知道 Vue 采用的是一种组件化开发模式，组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例，组件的创建，组件间的通讯，组件如...
Vue-点击按钮，当前按钮显示对应的type样式，而其他元素移除样式
slient033的博客
10-04 1669
Vue-点击按钮，当前按钮显示对应的type样式，而其他元素移除样式
element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色
懒虫的博客
07-15 1万+
element ui 中el-button按钮 , 动态设置el-button的type 即显示颜色
vue3 element-plus 动态设置el-button类型，npm run dev项目正常，npm run build失败
jdjfjgfdgdfg的博客
03-24 2581
“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
Iview Table组件中各种组件扩展的使用
10-17
在本文中，我们将深入探讨Iview Table组件中的各种组件扩展，以及如何在实际应用中实现多选框选中与禁选设置，以及在Table组件中点击Icon弹出Poptip的两种方法。Iview Table是基于Vue.js的UI组件库，提供了丰富的...
iView组件源码的使用
最新发布
03-20
1. **安装iView**：在项目中使用iView，首先需要通过npm（Node Package Manager）进行安装。在命令行中输入以下命令： ``` npm install iview --save ``` 2. **引入iView**：安装完成后，需要在项目入口文件...
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在使用IView的`Tree`组件时，你需要定义好数据结构，一般包含节点ID、父节点ID、节点文本等属性。为了支持拖拽，还需要添加额外的字段来记录拖动状态，例如拖动源节点ID和目标节点ID。 为了实现以上功能，你需要对...
vue iView 上传组件之手动上传功能
08-27
在Vue.js框架中，iView是一个非常受欢迎的UI组件库，尤其适合于PC端的中后台业务。iView提供了一套完整的高质量、功能丰富的组件，包括我们今天要讨论的上传组件。手动上传功能允许开发者更加灵活地控制文件上传的...
Vuex从入门到实战（十三）——【实践篇】按钮样式切换
芳草萋萋鹦鹉洲哦
05-26 682
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.
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...
动态添加element标签，数据操作
weixin_44860425的博客
12-27 2378
我的问题每次点击 添加新值按钮就会添加一个下拉框 然后我对下拉框进行更改的时候 第一次没问题 但是如果我在选中的下拉框中从新选择 数据就会发生变化 会保留之前选中的值 这样是不对 通过索引 每次进行更改时都会把之前选中的给替换掉 非常重要：this.attr.splice(index,1,{name , id}) <el-dialog :title="visibleTitle" :v...
iview 升级指南 —— Button 篇
weixin_33686714的博客
07-31 2474
iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。虽然官网已经有长长的更新日志，但看起来还是有些抽象了，所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。这一篇给大家讲解的，是一个很常用的组件 —— Button 先看结论 新版 Button 有如下新特性： 支持链...
Iview Button type脱坑
Codernmx
09-28 261
解决[Vue warn]: Invalid prop: custom validator check failed for prop “type”. found in ---> <Button> <TableCell> <TableTr> <TableBody> <Table> <Modal> 根据提示找Button 下
【vue笔记系列第一篇】iview研习
lixianghai2010的专栏
03-20 216
一，弹出 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="http://unpkg...
iview的Table中列生成 按钮 / 自定义列 的2种方法
LbJ_MVP的博客
08-08 1865
render、slot插槽- template两种方法实现Table生成自定义列
iview修改箭头icon
Debug Dream的博客
11-04 2690
前言：前端开发难免会有意无意听到BFC这个词，但是好像又没有很明确的思想去说清楚什么是BFC，感觉BFC离我们很近，又好像有点疏远。今天我们就简单聊聊BFC这个“孽缘”。 ##1.BFC的官方定义： BFC 全称为 块格式化上下文 (Block Formatting Context) 。一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部...
iView使用遇到的问题
weixin_34405332的博客
03-09 712
为什么80%的码农都做不了架构师？>>> ...
vue 使用前端框架 iview时，引入iview.css 报错
05-13
如果在使用 iview 时引入 iview.css 报错，可能是以下几个原因之一： 1. 路径错误：确认引入 iview.css 的路径是否正确，应该是在 index.html 或者入口文件中引入。比如，如果 iview.css 在 src/assets/css/iview....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值