el-table $set方法,不刷新, 呈现改变数据状态
实践文章
个人开发问题,记录一下,可能会存在不完美,欢迎大佬追加!!!,
html片段 重点 标记- - ->动态显示区域
<!-- 列表 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column fixed prop="user_name" label="姓名"></el-table-column>
<el-table-column prop="user_code" label="编码"></el-table-column>
<el-table-column prop="need_recheck" label="验证状态">
<!--动态显示区域-->
<template slot-scope="scope">
<el-button type="info" plain disabled class="status1" size="mini" >{{scope.row.need_recheck !=1 ? "已关闭" :"已开启"}}</el-button>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="230">
<template slot-scope="scope">
<!--scope.$index 获取触发事件的行-->
<el-button @click="handleClick(scope.row,scope.$index)" size="mini" type="success">开启</el-button>
<el-button @click="closeClick(scope.row,scope.$index)" size="mini" type="danger">关闭</el-button>
<el-button @click="resetSafety(scope.row)" type="primary" size="mini">重置</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
js 代码 $set方法
handleClick(row, index) {
console.log(row, index, "开启操作");
var index1 = index;
var userCode = row.user_code;
var that = this;
this.$http.ajax({
url: that.$api.config.addSafety,
method: "post",
data: {
need_recheck: 1,
user_code: userCode
},
success(res) {
if (res.data.code == 0) {
// $set方法
that.$set(that.tableData[index1],'need_recheck',1);
// that.aaa();
}
}
});
},
显示结果
图片:
点击按钮 开启关闭 按钮 实现不刷新 呈现数据状态