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