elementUI里的button使用disabled属性

学习记录：
实现在table列表中控制二次点击按钮时对应行的button为不可点击，效果图如下：

1.el-table在表格按钮标签中定义disabled属性

HTML部分代码：

<div id="app"> <el-table :data="showTableData" <el-table-column fixed="right"label="操作"width="100"><template slot-scope="scope"><el-button size="mini":disabled="scope.row.disabled"@@click="handleEdit(scope.$index, scope.row)">导入</el-button></template></el-table-column></el-table>
</div>

showTableData是对应的表格，这一步是为了给全局表格一个初始的disabled值为false，写在vue实例里。JS代码如下所示：

for (var i = 0; i < that.showTableData.length; i++) {that.$set(that.showTableData[i], "disabled", false);
}

下面是点击事件里的方法定义，editForm是获取点击到的行

handleEdit: function (index, row) {row.disabled = true;that.editForm = Object.assign({}, row);that.editForm = row; //获取表格的行赋值给editForm，与上一行一样的效果that.editForm.disabled = true;  //给对应的行一个disabled属性为true//判断输出表格里的每行是否添加了disable属性，可要也可以不要for (var i = 0; i < that.showTableData.length; i++) { if (that.editForm.ID == that.showTableData[i].ID) {that.showTableData[i] = that.editForm;}}},

2…$set的用法

.$set 即给对象新增属性，上面使用了**that. $set(that.showTableData[i], “disabled”, false);**给表格对应的行添加了disabled属性，可在控制台输出查看是否添加成功，为true表示按钮已被点击过不可再次点击，disabled为false表示未触发点击事件。

使用方式如下：

 - this.$set(原数组, 索引值, 需要赋的值)

elementUI里的button使用disabled属性相关推荐

手动封装element-ui里面的button组件
首先我们知道vue里面包含有父子组件但是你知道如果要进行一个element的手动组件封装怎么封装吗 1首先第一步首先我们建立一个组件最好设置在一个文件目录下比如components 只是一个普 ...
当button具有disabled属性时，el-tooltip也失效。解决办法
就很神奇,将button设置为disabled不能点击时,上边的el-tooltip也消失了. 但是项目里需要的是el-tooltip一直都在,无论按钮是否可用. 如官网里写的下图这样,就会导致按钮失 ...
button设置disabled属性不生效_jQuery属性节点
发现了很好玩的表情可以插入嘻嘻嘻嘻嘻嘻嘻 1.attr属性操作在jQuery中,可以通过attr()方法操作属性,可以是固有属性,也可以是自定义属性. 1.1 设置属性值 // 设置单个属性 $(& ...
vue中使用js控制button的disabled属性
<button ref="btn">按钮</button> 最好不要使用this.$refs.btn.setAttribute('disabled',tru ...
disabled属性
1.在给button设置disabled属性的时候,如下 <button disabled="disabled">确定</button> 此时按钮处于不可点 ...
关于js里面表单disabled属性使用
今天在项目中无意发现在静态文件中的代码为 <input id="start_btn" type="button" value="启动" ...
input button 中的disabled属性
input button 中的disabled属性 disabled我以为它是true时就是禁用,false是可以点击的,disabled＝'disabled'是禁用的确最后一个是对的,但是只要有 ...
image是否有disabled属性_Vue学习笔记模板语法、计算属性
点击上方"蓝字"关注我们吧! vue学习笔记官网:https://cn.vuejs.org/v2/guide/ 1.vue体验 demo示例: image.png 示例代码: & ...
html的disabled属性
由于我操作在同一个dialog弹出层里,每次弹出页面都会通过ajax获取数据,然后根据数据特性来判断input的禁用或使用,由于使同一个页面,html属性会残留在页面上.之后网上的一些回答迷惑了我,让 ...

elementUI里的button使用disabled属性

1.el-table在表格按钮标签中定义disabled属性

2…$set的用法

elementUI里的button使用disabled属性相关推荐

最新文章

热门文章