0
点赞
收藏
分享

微信扫一扫

elementUI里的button使用disabled属性

程序员知识圈 2022-02-26 阅读 71

学习记录:
实现在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(原数组, 索引值, 需要赋的值)

总结

写到这里也结束了,在文章最后放上一个小小的福利,以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发,最主要的是要学好技术,而学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯,更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲,需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题!

全方面的web前端进阶实践技术资料,并且还有技术大牛一起讨论交流解决问题。

举报

相关推荐

0 条评论