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(原数组, 索引值, 需要赋的值)

总结

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

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

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